@charset "UTF-8";

/*
Theme Name:   iCodito
Description: Template Shop;
Author:       hnemati - iCodito;
Author URI:   http://icodito.ir
Version:      2.1.6
*/
@font-face {
   font-family: 'icodito';
   src: url('assets/fonts/AradVF.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
   font-display: fallback;

}

@font-face {
   font-family: 'icod';
   src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: fallback;

}

html {
   scrollbar-gutter: stable;
}

/* ========== ۱) متغیرها و تم‌ها ========== */
:root {
   --ff: "icodito", Tahoma, sans-serif;
   --ff-cod: "icod", Tahoma, sans-serif;
   --r-xl: 20px;
   --r-lg: 16px;
   --r-md: 12px;
   --r-sm: 8px;
   --sh1: 0 1px 2px rgba(15, 23, 42, .05);
   --sh2: 0 12px 32px rgba(15, 23, 42, .10);
   --bg: #f2f3fa;
   --surface: #fff;
   --field: #f3f4fa;
   --text: #232537;
   --muted: #8b90a5;
   --border: #e7e8f2;
   --star: #f6a723;
   --star-e: #e2e5f1;
   --success: #059669;
   --warning: #d97706;
   --error: #dc2626;
   --footer: #0d1120;
   --bg-topbar: linear-gradient(220deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .5)), radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .65), transparent 40%);
}

.theme-home {
   --primary: #0284c7;
   --primary-soft: #e0f2fe;
   --primary-softer: #f0f9ff;
   --on-primary: #fff;
   --ring: rgba(2, 132, 199, .22);
   --grad: linear-gradient(135deg, #38bdf8, #0369a1);
   --hero: linear-gradient(135deg, #0f172a, #1e3a8a 55%, #0284c7);
}

.theme-blog {
   --primary: #d97706;
   --primary-soft: #fef3c7;
   --primary-softer: #fffbeb;
   --on-primary: #fff;
   --ring: rgba(217, 119, 6, .22);
   --grad: linear-gradient(135deg, #fbbf24, #b45309);
   --hero: linear-gradient(135deg, #451a03, #78350f 60%, #d97706);
}

.theme-product {
   --primary: #ea580c;
   --primary-soft: #ffedd5;
   --primary-softer: #fff7ed;
   --on-primary: #fff;
   --ring: rgba(234, 88, 12, .22);
   --grad: linear-gradient(135deg, #fb923c, #c2410c);
   --hero: linear-gradient(135deg, #431407, #9a3412 60%, #ea580c);
}

.theme-addon {
   --primary: #7c3aed;
   --primary-soft: #ece5fd;
   --primary-softer: #f6f2ff;
   --on-primary: #fff;
   --ring: rgba(124, 58, 237, .22);
   --grad: linear-gradient(135deg, #8b5cf6, #6d28d9);
   --hero: linear-gradient(to left, #682f94, #3a206f 55%, #1d1953);
}

.theme-app {
   --primary: #4f46e5;
   --primary-soft: #e0e7ff;
   --primary-softer: #f1f4ff;
   --on-primary: #fff;
   --ring: rgba(79, 70, 229, .22);
   --grad: linear-gradient(135deg, #6366f1, #4338ca);
   --hero: linear-gradient(to left, #033172, #002253 60%, #001a3f);
}

.theme-font {
   --primary: #059669;
   --primary-soft: #d5f2e5;
   --primary-softer: #eefbf5;
   --on-primary: #fff;
   --ring: rgba(5, 150, 105, .22);
   --grad: linear-gradient(135deg, #34d399, #047857);
   --hero: linear-gradient(to left, #07382b, #012725 60%, #001d22);
}

.theme-account {
   --primary: #0891b2;
   --primary-soft: #cffafe;
   --primary-softer: #ecfeff;
   --on-primary: #fff;
   --ring: rgba(8, 145, 178, .22);
   --grad: linear-gradient(135deg, #22d3ee, #0e7490);
   --hero: linear-gradient(135deg, #083344, #155e75 60%, #0891b2);
}

/* ========== ۲) ریست و پایه ========== */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* ---------- فایرفاکس ---------- */
* {
   scrollbar-width: thin;
   scrollbar-color: color-mix(in srgb, var(--primary) 55%, transparent) transparent;
}

/* ---------- کروم / اج / سافاری ---------- */
::-webkit-scrollbar {
   width: 11px;
   height: 9px;
}

::-webkit-scrollbar-track {
   background: transparent;
}

::-webkit-scrollbar-thumb {
   background: color-mix(in srgb, var(--primary) 40%, transparent);
   border-radius: 99px;
   border: 3px solid transparent;
   background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
   background: color-mix(in srgb, var(--primary) 75%, transparent);
   background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
   background: var(--primary);
   background-clip: padding-box;
}

::-webkit-scrollbar-corner {
   background: transparent;
}

body {
   font-family: var(--ff);
   background: var(--bg);
   color: var(--text);
   font-size: 14px;
   line-height: 1.9;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   transition: background-color .35s ease, color .35s ease;
}

a {
   color: inherit;
   text-decoration: none;
}

button {
   font-family: inherit;
   border: 0;
   background: none;
   cursor: pointer;
   color: inherit;
}

ul,
ol {
   list-style: none;
}

svg {
   display: block;
}

img {
   max-width: 100%;
}

.dir-ltr {
   /*direction: ltr;*/
   display: inline-block;
}

.muted {
   color: var(--muted);
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}

::selection {
   background: var(--primary);
   color: #fff;
}

:focus-visible {
   outline: 2px solid var(--primary);
   outline-offset: 2px;
   border-radius: 6px;
}

body.menu-open {
   overflow: hidden;
}

/* ========== ۳) اسکلت ========== */
.layout {
   display: flex;
   gap: 20px;
   max-width: 1560px;
   margin: 0 auto;
   padding: 20px;
   align-items: flex-start;
   width: 100%;
}

.main {
   flex: 1;
   min-width: 0;
   width: 100%;
}

.sidebar {
   flex: 0 0 236px;
   background: var(--surface);
   border-radius: var(--r-lg);
   box-shadow: var(--sh1);
   padding: 26px 20px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   position: sticky;
   top: 20px;
   height: calc(100vh - 40px);
}

.brand {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-size: 21px;
   font-weight: 800;
}

.brand-icon {
   width: 30px;
   height: 30px;
   color: var(--primary);
}

/* ========== ۴) منوی سایدبار + فلای‌اوت ========== */
.nav {
   display: flex;
   flex-direction: column;
   gap: 4px;
   flex: 1;
}

.nav .menu {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.nav .menu-item {
   position: relative;
}

.nav .menu-item>a {
   position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   padding: 10px 16px;
   border-radius: var(--r-md);
   color: var(--muted);
   font-weight: 600;
   font-size: 13.5px;
   transition: color .2s, background-color .2s;
}

.nav .menu-item>a:hover,
.nav .menu-item>a:focus-visible {
   color: var(--primary);
   background: var(--primary-softer);
}

.nav .menu-item.current-menu-item>a,
.nav .menu-item.current_page_item>a,
.nav .menu-item.current-menu-ancestor>a {
   color: var(--primary);
   background: var(--primary-soft);
   font-weight: 800;
}

.nav .menu-item.current-menu-item>a::before,
.nav .menu-item.current_page_item>a::before,
.nav .menu-item.current-menu-ancestor>a::before {
   content: "";
   position: absolute;
   inset-inline-start: -12px;
   top: 22%;
   bottom: 22%;
   width: 4px;
   border-radius: 8px;
   background: var(--primary);
}

.nav .menu-item>a .icms-icon,
.nav .menu-item>a .nav-icon {
   width: 18px;
   height: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.nav .menu-item>a .icms-icon svg,
.nav .menu-item>a .nav-icon svg {
   width: 18px;
   height: 18px;
}

.nav .menu-item-has-children>a::after {
   content: "";
   width: 14px;
   height: 14px;
   margin-inline-start: auto;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b90a5' stroke-width='2.4' stroke-linecap='round'><path d='m15 6-6 6 6 6'/></svg>");
   background-repeat: no-repeat;
   background-size: contain;
   transition: transform .3s ease;
   flex-shrink: 0;
}

.nav .menu-item-has-children:hover>a::after,
.nav .menu-item-has-children:focus-within>a::after {
   transform: translateX(-2px);
}

.nav .sub-menu {
   position: absolute;
   top: 0;
   inset-inline-end: calc(100% + 12px);
   width: 560px;
   max-width: calc(100vw - 300px);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   box-shadow: 0 20px 60px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08);
   padding: 20px;
   opacity: 0;
   visibility: hidden;
   transform: translateX(8px);
   transition: opacity .25s ease, transform .25s ease, visibility .25s;
   pointer-events: none;
   z-index: 200;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
}

.nav .menu-item-has-children:hover>.sub-menu,
.nav .menu-item-has-children:focus-within>.sub-menu {
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
   pointer-events: auto;
}

.nav .sub-menu .menu-item>a {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 14px;
   border-radius: var(--r-md);
   color: var(--text);
   font-size: 12.5px;
   font-weight: 600;
   line-height: 1.6;
   transition: background .2s, transform .2s;
   border: 1px solid transparent;
}

.nav .sub-menu .menu-item>a:hover,
.nav .sub-menu .menu-item>a:focus-visible {
   background: var(--primary-softer);
   color: var(--primary);
   transform: translateY(-1px);
   border-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.nav .sub-menu .menu-item-description {
   display: block;
   font-size: 11px;
   font-weight: 500;
   color: var(--muted);
   margin-top: 3px;
   line-height: 1.7;
}

.nav .sub-menu .menu-item.current-menu-item>a,
.nav .sub-menu .menu-item.current_page_item>a {
   background: var(--primary-soft);
   color: var(--primary);
   border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.nav .sub-menu .menu-item.current-menu-item>a::before {
   display: none;
}

.nav .sub-menu-header {
   grid-column: 1/-1;
   padding: 4px 8px 12px;
   border-bottom: 1px solid var(--border);
   margin-bottom: 6px;
   font-size: 11px;
   font-weight: 700;
   color: var(--muted);
   letter-spacing: 1px;
}

/* ========== ۵) دکمه‌ها ========== */
.sidebar-actions {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border-radius: var(--r-md);
   font-weight: 500;
   font-size: 13px;
   padding: 10px 18px;
   border: 1px solid transparent;
   transition: .2s;
   position: relative;
}

.btn svg {
   width: 20px;
   height: 20px;
}

.btn-primary {
   background: var(--grad);
   color: var(--on-primary);
   box-shadow: 0 6px 16px var(--ring);
   border: unset;
}

.btn-primary:hover {
   filter: brightness(1.08);
   transform: translateY(-1px);
}

.btn-outline {
   border-color: color-mix(in srgb, var(--primary) 40%, transparent);
   color: var(--primary);
   background: var(--surface);
}

.btn-outline:hover {
   background: var(--primary-soft);
}

.btn-soft {
   background: var(--field);
   color: var(--text);
}

.btn-soft:hover {
   background: var(--primary-soft);
   color: var(--primary);
}

.btn-ghost {
   color: var(--muted);
}

.btn-ghost:hover {
   color: var(--primary);
   background: var(--primary-softer);
}

.btn-block {
   width: auto;
   min-width: 60%;
}

.btn-sm {
   padding: 8px 14px;
   font-size: 14px;
   border-radius: 10px;
}

.btn-lg {
   padding: 13px 26px;
   font-size: 14px;
   border-radius: 14px;
}

.btn:disabled {
   opacity: .5;
   pointer-events: none;
}

.btn.is-loading {
   color: transparent !important;
   pointer-events: none;
}

.btn.is-loading::after {
   content: "";
   position: absolute;
   inset: 0;
   margin: auto;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 2.5px solid #fff;
   border-top-color: transparent;
   animation: spin .7s linear infinite;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

.icon-btn {
   width: 40px;
   height: 40px;
   border-radius: var(--r-md);
   background: var(--field);
   display: grid;
   place-items: center;
   color: var(--text);
   transition: .2s;
   position: relative;
}

.icon-btn:hover {
   background: var(--primary-soft);
   color: var(--primary);
}

.icon-btn svg {
   width: 18px;
   height: 18px;
}

.cart-count {
   position: absolute;
   top: -7px;
   inset-inline-end: -7px;
   background: var(--grad);
   color: #fff;
   border-radius: 99px;
   font-size: 10px;
   padding: 1px 7px;
   font-weight: 800;
   box-shadow: var(--sh1);
}

/* ========== ۶) تاپ‌بار + جستجو + بردکرامب ========== */
.topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   background: var(--bg-topbar);
   border-radius: var(--r-lg);
   box-shadow: var(--sh1);
   padding: 12px 16px;
   margin-bottom: 20px;
   position: sticky;
   top: 10px;
   z-index: 50;
   backdrop-filter: blur(5px) saturate(180%);
}

.topbar-actions {
   display: flex;
   align-items: center;
   gap: 10px;
}

.ajax-search-form,
.search-box {
   position: relative;
   display: flex;
   flex: 0 1 340px;
   align-items: center;
   justify-content: center;
}

.search-input {
   width: 100%;
   background: var(--field);
   border: 1px solid transparent;
   border-radius: var(--r-md);
   padding: 10px 40px 10px 46px;
   font: inherit;
   color: var(--text);
   outline: none;
   transition: .2s;
}

.search-input::placeholder {
   color: var(--muted);
}

.search-input:focus {
   border-color: var(--primary);
   background: var(--surface);
   box-shadow: 0 0 0 4px var(--ring);
}

.ajax-search-form .icon-search {
   position: absolute;
   inset-inline-start: 12px;
   width: 17px;
   height: 17px;
   color: var(--muted);
   pointer-events: none;
}

.search-submit {
   position: absolute;
   inset-inline-end: 6px;
   width: 30px;
   height: 30px;
   border-radius: 9px;
   display: grid;
   place-items: center;
   color: var(--primary);
}

.search-submit svg {
   width: 15px;
   height: 15px;
}

.ajax-search-form.--on-hero .search-input {
   background: rgba(255, 255, 255, .96);
}

.ajax-search-container {
   position: relative;
   width: 100%;
}

.side-col .ajax-search-form,
.widget .ajax-search-form {
   flex: 1 1 100%;
   width: 100%;
}

.breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 16px;
   flex-wrap: wrap;
   background: var(--surface);
   border-radius: var(--r-lg);
   box-shadow: var(--sh1);
   padding: 10px 20px;
}

.breadcrumb a:hover {
   color: var(--primary);
}

.breadcrumb .sep {
   opacity: .55;
}

.breadcrumb .current {
   color: var(--primary);
   font-weight: 700;
}

.card {
   background: var(--surface);
   border-radius: var(--r-lg);
   box-shadow: var(--sh1);
   border: 1px solid var(--border);
   transition: all .3s ease-in-out;
}

/* ========== ۷) هیرو / اسلایدر / page-hero ========== */
.hero {
   position: relative;
   background: var(--hero);
   border-radius: var(--r-xl);
   color: #fff;
   text-align: center;
   padding: 38px 90px 66px;
   margin-bottom: 18px;
}

.hero h1 {
   font-size: 24px;
   font-weight: 800;
   margin-bottom: 4px;
}

.hero p {
   font-size: 12.5px;
   opacity: .85;
}

.hero-icon {
   position: absolute;
   inset-inline-end: 30px;
   top: 50%;
   right: 10%;
   transform: translateY(-50%);
   width: 140px;
   height: 140px;
   border-radius: 58% 42% 42% 58%/45% 51% 49% 55%;
   background: rgba(255, 255, 255, .14);
   display: grid;
   place-items: center;
}

.hero-icon.--round {
   border-radius: 50%;
}

.hero-icon svg {
   width: 90px;
   height: 90px;
   color: rgb(255 255 255/60%);
}

.hero-icon .aa {
   font-size: 24px;
   font-weight: 800;
}

.hero-search {
   position: absolute;
   bottom: 14px;
   inset-inline-end: 20px;
   width: 230px;
}

.page-hero {
   background: var(--hero);
   border-radius: var(--r-xl);
   color: #fff;
   padding: 36px 32px;
   margin-bottom: 22px;
   position: relative;
   overflow: hidden;
}

.page-hero h1 {
   font-size: 23px;
   font-weight: 800;
   margin-bottom: 6px;
}

.page-hero p {
   font-size: 12.5px;
   opacity: .85;
}

.page-hero .breadcrumb {
   color: #cfd6e4;
   margin: 0 0 12px;
   background: transparent;
   box-shadow: none;
   padding: 0;
}

.page-hero .breadcrumb a:hover,
.page-hero .breadcrumb .current {
   color: #fff;
}

/* اسلایدر اختصاصی صفحه اصلی */
.hero-slider {
   position: relative;
   overflow: hidden;
   border-radius: var(--r-xl);
   margin-bottom: 22px;
   background: var(--field);
   box-shadow: var(--sh1);
}

.hero-slider-track {
   display: flex !important;
   transform: translateX(0);
   transition: transform .55s cubic-bezier(.4, .2, .2, 1);
   will-change: transform;
   direction: ltr;
}

.hero-slide {
   flex: 0 0 100% !important;
   width: 100% !important;
   aspect-ratio: 21/8;
   display: block;
   position: relative;
   overflow: hidden;
   margin: 0;
}

.hero-slide img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   object-position: center;
   display: block;
   user-select: none;
   -webkit-user-drag: none;
}

.hero-slider-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .92);
   color: #222;
   display: grid;
   place-items: center;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transition: all .3s ease;
   z-index: 3;
   border: 0;
   box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.hero-slider-arrow svg {
   width: 18px;
   height: 18px;
}

.hero-slider:hover .hero-slider-arrow {
   opacity: 1;
   visibility: visible;
}

.hero-slider-arrow.--prev {
   inset-inline-start: 16px;
}

.hero-slider-arrow.--next {
   inset-inline-end: 16px;
}

.hero-slider-dots {
   position: absolute;
   bottom: 14px;
   inset-inline: 0;
   display: flex;
   gap: 8px;
   justify-content: center;
   z-index: 3;
}

.hero-slider-dots button {
   width: 10px;
   height: 10px;
   border-radius: 99px;
   background: rgba(255, 255, 255, .55);
   border: 0;
   cursor: pointer;
   transition: all .3s ease;
   padding: 0;
}

.hero-slider-dots button.active {
   background: #fff;
   width: 28px;
}

/* ========== ۸) سربرگ بخش‌ها + داشبورد دانلود + تبلیغ ========== */
.sec-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
   margin: 36px 0 18px;
   flex-wrap: wrap;
}

.sec-title {
   font-size: 19px;
   font-weight: 800;
   position: relative;
   padding-inline-start: 14px;
}

.sec-title::before {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   top: 15%;
   bottom: 15%;
   width: 4px;
   border-radius: 6px;
   background: var(--grad);
}

.sec-desc {
   font-size: 11.5px;
   color: var(--muted);
   margin-top: 2px;
}

.sec-link {
   display: inline-flex;
   gap: 7px;
   align-items: center;
   color: var(--primary);
   font-size: 12.5px;
   font-weight: 800;
}

.sec-link svg {
   width: 15px;
   height: 15px;
   transition: .2s;
}

.sec-link:hover svg {
   transform: translateX(-3px);
}

.dl-dash {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
}

.dl-dash-card {
   padding: 24px;
}

.dl-dash-head {
   display: flex;
   gap: 14px;
   align-items: center;
   margin-bottom: 16px;
}

.dl-logo {
   width: 58px;
   height: 58px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   color: #fff;
   flex-shrink: 0;
}

.dl-logo.--wp {
   background: linear-gradient(135deg, #4fb3e8, #21759b);
}

.dl-logo.--woo {
   background: linear-gradient(135deg, #9656a8, #7b4b94);
}

.dl-logo svg {
   width: 45px;
   height: 45px;
}

.dl-dash-title {
   font-size: 16px;
   font-weight: 800;
}

.dl-dash-sub {
   font-size: 11px;
   color: var(--muted);
}

.dl-file {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--field);
   border-radius: 10px;
   padding: 9px 14px;
   font-size: 11.5px;
   margin-bottom: 14px;
   flex-wrap: wrap;
   gap: 6px;
}

.dl-file b {
   font-weight: 800;
}

.req-title {
   font-size: 12px;
   font-weight: 800;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 7px;
}

.req-title svg {
   width: 15px;
   height: 15px;
   color: var(--primary);
}

.req-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}

.req-item {
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 9px 6px;
   text-align: center;
   font-size: 10px;
   color: var(--muted);
}

.req-item svg {
   width: 16px;
   height: 16px;
   color: var(--primary);
   margin: 0 auto 5px;
}

.req-item b {
   display: block;
   color: var(--text);
   font-size: 11px;
   margin-top: 2px;
}

.whats-new {
   margin-top: 16px;
   border-top: 1px dashed var(--border);
   padding-top: 14px;
}

.whats-new li {
   display: flex;
   gap: 8px;
   align-items: center;
   font-size: 11.5px;
   color: var(--muted);
   margin-bottom: 7px;
}

.whats-new svg {
   width: 14px;
   height: 14px;
   color: var(--success);
   flex-shrink: 0;
}

.badge {
   display: inline-block;
   padding: 3px 11px;
   border-radius: 99px;
   font-size: 10px;
   font-weight: 800;
}

.badge.--stable {
   background: #ecfdf5;
   color: #047857;
   border: 1px solid #a7f3d0;
}

.badge.--beta {
   background: #fffbeb;
   color: #b45309;
   border: 1px solid #fde68a;
}

.badge.--soft {
   background: var(--primary-soft);
   color: var(--primary);
}

.badge.--grad {
   background: var(--grad);
   color: #fff;
}

.promo-slot {
   border: 1.5px dashed color-mix(in srgb, var(--muted) 45%, transparent);
   border-radius: var(--r-lg);
   background: color-mix(in srgb, var(--surface) 60%, var(--bg));
   display: grid;
   place-items: center;
   color: var(--muted);
   font-size: 10.5px;
   letter-spacing: 2px;
   font-weight: 700;
   margin: 26px auto;
   position: relative;
   overflow: hidden;
}

.promo-slot::after {
   content: "ADVERTISEMENT";
   position: absolute;
   top: 8px;
   inset-inline-end: 12px;
   font-size: 8.5px;
   letter-spacing: 2px;
   opacity: .6;
}

.promo-slot a {
   display: inline-flex;
   width: 100%;
}

.promo-slot a img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.promo-slot.--a100 {
   max-width: 100%;
   height: auto;
}

.promo-slot.--970 {
   max-width: 970px;
   height: auto;
}

.promo-slot.--size-medium {
   width: 300px;
   height: auto;
   margin: 0 auto 16px;
}

.promo-slot.--size-tall {
   width: 300px;
   height: auto;
}

.promo-slot.--inline {
   max-width: 100%;
   height: auto;
}

/* ========== ۹) چیپ / فیلتر ========== */
.chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 20px;
}

.chip {
   padding: 7px 18px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 10px;
   font-size: 12px;
   font-weight: 700;
   color: var(--muted);
   box-shadow: var(--sh1);
   transition: .2s;
}

.chip:hover {
   color: var(--primary);
   border-color: var(--primary);
}

.chip.is-active {
   background: var(--primary-soft);
   border-color: transparent;
   color: var(--primary);
}

.chip-count {
   font-size: 10px;
   opacity: .7;
   margin-inline-start: 4px;
}

.filters {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
   padding: 12px 14px;
   margin-bottom: 16px;
}

.filter-select {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 12px;
   border-radius: 10px;
   border: 1px solid var(--border);
   font-size: 12px;
   font-weight: 700;
   color: var(--muted);
   background: var(--surface);
   transition: .2s;
}

.filter-select:hover {
   color: var(--primary);
   border-color: var(--primary);
}

.filter-select svg {
   width: 14px;
   height: 14px;
}

.fselect {
   position: relative;
}

.fselect-menu {
   position: absolute;
   top: calc(100% + 6px);
   inset-inline-start: 0;
   min-width: 170px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 12px;
   box-shadow: var(--sh2);
   padding: 6px;
   display: none;
   z-index: 150;
   max-height: 280px;
   overflow-y: auto;
}

.fselect.is-open .fselect-menu {
   display: block;
}

.fselect-option {
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: center;
   padding: 8px 12px;
   border-radius: 8px;
   font-size: 12px;
   font-weight: 600;
   color: var(--muted);
   transition: .15s;
   text-align: start;
}

.fselect-option:hover {
   background: var(--primary-softer);
   color: var(--primary);
}

.fselect-option.is-active {
   background: var(--primary-soft);
   color: var(--primary);
   font-weight: 800;
}

.fselect-option.is-active::after {
   content: "✓";
   font-size: 11px;
}

#ajax-grid.is-loading {
   opacity: .45;
   pointer-events: none;
   transition: opacity .2s;
}

.sort-note {
   font-size: 11px;
   color: var(--muted);
   margin-inline-start: auto;
}

.sort-note b {
   color: var(--primary);
}

/* ========== ۱۰) گریدها و کارت‌ها ========== */
.grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
}

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
}

.plugin-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
}

.plugin-card {
   padding: 22px 16px 14px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 9px;
   transition: .25s;
}

.plugin-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--sh2);
}

.plugin-icon {
   width: 110px;
   height: 110px;
   border-radius: 58% 42% 42% 58%/45% 51% 49% 55%;
   display: grid;
   place-items: center;
   color: #fff;
   font-weight: 800;
   box-shadow: var(--sh1);
}

.plugin-icon a {
   border-radius: 35px;
}

.plugin-icon img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
   transition: all .4s ease-in-out;
}

.plugin-icon svg {
   width: 34px;
   height: 34px;
}

.plugin-card:hover .plugin-icon img {
   border-radius: 38% 62% 41% 59%/61% 43% 57% 39%;
}

.plugin-title {
   font-size: 14px;
   font-weight: 800;
   transition: color .3s;
}

.plugin-card:hover .plugin-title {
   color: var(--primary);
}

.rating {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 11px;
   color: var(--muted);
}

.stars {
   --rate: 100%;
   position: relative;
   display: inline-block;
   line-height: 1;
   font-size: 0;
}

.stars::before {
   content: "★★★★★";
   color: var(--star-e);
   font-size: 12px;
   letter-spacing: 2px;
}

.stars::after {
   content: "★★★★★";
   position: absolute;
   inset-inline-start: 0;
   top: 0;
   width: var(--rate);
   overflow: hidden;
   white-space: nowrap;
   color: var(--star);
   font-size: 12px;
   letter-spacing: 2px;
}

.plugin-meta {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 10.5px;
   color: var(--muted);
}

.plugin-meta svg {
   width: 14px;
   height: 14px;
   color: var(--primary);
}

.card-foot {
   font-size: 12px;
   color: var(--muted);
   border-top: 1px dashed var(--border);
   padding-top: 8px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.card-foot svg {
   width: 18px;
   height: 18px;
   color: var(--primary);
}

.card-os {
   font-size: 10.5px;
   color: var(--muted);
}

.sw-meta {
   display: flex;
   gap: 10px;
   font-size: 10px;
   color: var(--muted);
   flex-wrap: wrap;
   justify-content: center;
}

.sw-meta span {
   display: flex;
   gap: 4px;
   align-items: center;
}

.sw-meta svg {
   width: 12px;
   height: 12px;
}

.empty-state {
   padding: 50px 20px;
   text-align: center;
   color: var(--muted);
}

.empty-state svg {
   width: 46px;
   height: 46px;
   margin: 0 auto 12px;
   opacity: .6;
}

.empty-state h3 {
   font-size: 15px;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 6px;
}

/* کارت مقاله */
.post-card {
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: .25s;
}

.post-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--sh2);
}

.post-thumb {
   height: 170px;
   position: relative;
   overflow: hidden;
   display: grid;
   place-items: center;
}

.post-thumb img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.post-thumb svg {
   width: 44px;
   height: 44px;
   color: #fff;
   opacity: .9;
}

.post-thumb .badge-cat {
   position: absolute;
   top: 12px;
   inset-inline-start: 12px;
}

.badge-cat {
   background: var(--grad);
   color: #fff;
   font-size: 11px;
   font-weight: 500;
   padding: 4px 12px;
   border-radius: 8px;
   box-shadow: var(--sh1);
}

.post-body {
   padding: 18px;
   display: flex;
   flex-direction: column;
   gap: 9px;
   flex: 1;
}

.post-title {
   font-size: 14px;
   font-weight: 700;
   line-height: 1.8;
}

.post-card:hover .post-title {
   color: var(--primary);
}

.post-excerpt {
   font-size: 11.5px;
   color: var(--muted);
}

.post-meta {
   display: flex;
   gap: 12px;
   font-size: 12px;
   color: var(--muted);
   align-items: center;
   flex-wrap: wrap;
   justify-content: space-around;
}

.post-meta span {
   display: flex;
   gap: 5px;
   align-items: center;
}

/* ========== آیکن‌های متای تک‌نوشته ========== */
.post-meta--single span svg {
   width: 15px;
   height: 15px;
   color: var(--primary);
   flex-shrink: 0;
   opacity: .9;
}

.post-meta span svg {
   width: 20px;
   height: 20px;
}

.post-card.--featured {
   grid-column: span 2;
   flex-direction: row;
}

.post-card.--featured .post-thumb {
   height: auto;
   flex: 0 0 46%;
}

.post-card.--featured .post-title {
   font-size: 17px;
}

/* کارت محصول */
.product-card {
   overflow: hidden;
   transition: .25s;
   position: relative;
}

.product-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--sh2);
}

.product-thumb {
   height: 170px;
   display: grid;
   place-items: center;
   position: relative;
   background: var(--field);
   overflow: hidden;
}

.product-thumb>img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
}

.product-card:hover .product-thumb>img {
   transform: scale(1.06);
}

.product-thumb .p-icon {
   width: 74px;
   height: 74px;
   border-radius: 20px;
   display: grid;
   place-items: center;
   color: #fff;
   transition: .3s;
}

.product-card:hover .p-icon {
   transform: scale(1.07);
}

.product-thumb .p-icon svg {
   width: 38px;
   height: 38px;
}

.discount-badge {
   position: absolute;
   top: 12px;
   inset-inline-start: 12px;
   background: var(--grad);
   color: #fff;
   border-radius: 8px;
   padding: 3px 10px;
   font-size: 10.5px;
   font-weight: 800;
   z-index: 2;
}

.product-body {
   padding: 16px;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.product-title {
   font-size: 13px;
   font-weight: 800;
}

.price-row {
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
   flex-wrap: wrap;
}

.price-old {
   color: var(--muted);
   text-decoration: line-through;
   font-size: 11px;
}

.price-now {
   font-weight: 800;
   font-size: 14.5px;
   color: var(--primary);
}

.price-now small {
   font-size: 10px;
   font-weight: 600;
   color: var(--muted);
}

/* استایل قیمت ووکامرس — صفحه اصلی و آرشیو محصولات */
.woocommerce-Price-amount {
   font-weight: 800;
   font-size: 14.5px;
   color: var(--primary);
}

.woocommerce-Price-currencySymbol {
   font-size: 10px;
   font-weight: 600;
   color: var(--muted);
   margin-inline-start: 2px;
   font-feature-settings: "ss04";
}

.price-row del {
   color: var(--muted);
   font-size: 11px;
   text-decoration: line-through;
   font-weight: 600;
   text-decoration-color: #F44336;
   text-decoration-style: double;
}

.price-row ins {
   text-decoration: none;
   color: var(--primary);
   font-weight: 800;
   font-size: 14.5px;
}

.price-row del span.woocommerce-Price-currencySymbol {
   font-size: 0;
}

.discount-badge {
   box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.product-card .price-row {
   margin: 8px 0;
}

.product-card .price-row .woocommerce-Price-amount {
   font-size: 14px;
}

.product-card .price-row del .woocommerce-Price-amount {
   font-size: 11px;
   color: var(--muted);
   font-weight: 400;
}

.product-card .price-row ins .woocommerce-Price-amount {
   font-size: 20px;
   color: var(--primary);
   font-weight: 800;
}

.home .product-card .price-row,
.front-page .product-card .price-row {
   justify-content: center;
   gap: 8px;
}

.home .product-card .price-row .woocommerce-Price-amount,
.front-page .product-card .price-row .woocommerce-Price-amount {
   font-size: 13.5px;
}

.woocommerce-Price-amount bdi {
   unicode-bidi: isolate;
}

.woocommerce-variation-price {
   font-size: 14px;
   font-weight: 700;
   color: var(--primary);
   margin: 8px 0;
}

.woocommerce-variation-price del {
   color: var(--muted);
   font-size: 11px;
   margin-inline-end: 6px;
}

.woocommerce-variation-price ins {
   text-decoration: none;
   color: var(--primary);
   font-weight: 800;
}

.woocommerce-Price-amount.from {
   font-size: 11px;
   color: var(--muted);
   font-weight: 600;
}

.price-row .from {
   font-size: 10px;
   color: var(--muted);
   margin-inline-end: 4px;
}

.dark .woocommerce-Price-amount {
   color: color-mix(in srgb, var(--primary) 75%, #fff);
}

.dark .price-row del {
   color: #8b90a5;
}

.dark .price-row ins {
   color: color-mix(in srgb, var(--primary) 75%, #fff);
}

.dark .price-old {
   color: #8b90a5;
}

.dark .price-now {
   color: color-mix(in srgb, var(--primary) 75%, #fff);
}

.dark .woocommerce-variation-price {
   color: color-mix(in srgb, var(--primary) 75%, #fff);
}

/* کارت فونت */
.font-card {
   padding: 28px 16px 18px;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 6px;
   align-items: center;
   transition: .25s;
}

.font-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--sh2);
}

.font-thumb {
   width: 100%;
   height: 120px;
   border-radius: 12px;
   overflow: hidden;
   display: block;
   background: var(--field);
   border: 1px solid var(--border);
   margin-bottom: 4px;
}

.font-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .4s ease;
}

.font-card:hover .font-thumb img {
   transform: scale(1.06);
}

.dark .font-thumb {
   background: var(--field);
   border-color: var(--border);
}

.font-preview {
   font-size: 42px;
   font-weight: 700;
   color: #16182a;
   line-height: 1.4;
}

.font-name {
   font-size: 13px;
   font-weight: 800;
}

.font-meta {
   font-size: 11px;
   color: var(--muted);
}

/* ========== ۱۱) صفحه‌بندی ========== */
.pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   margin: 28px 0 6px;
}

.pagination>.nav-links {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
}

.page-numbers {
   min-width: 36px;
   height: 36px;
   padding: 0 10px;
   border-radius: 10px;
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--muted);
   font-size: 12px;
   display: grid;
   place-items: center;
}

.page-numbers svg {
   width: 15px;
   height: 15px;
}

.page-numbers:hover {
   color: var(--primary);
   border-color: var(--primary);
}

.page-numbers.current {
   background: var(--grad);
   color: #fff;
   border-color: transparent;
   box-shadow: 0 4px 12px var(--ring);
}

.page-dots {
   color: var(--muted);
   font-weight: 800;
}

/* ========== ۱۲) وبلاگ / مقاله / نظرات / فرم‌ها ========== */
.blog-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 300px;
   gap: 20px;
   align-items: start;
}

.side-col {
   display: flex;
   flex-direction: column;
   gap: 18px;
   position: sticky;
   top: 115px;
}

.widget {
   padding: 20px;
}

.widget-title {
   font-size: 14px;
   font-weight: 800;
   margin-bottom: 14px;
   position: relative;
   padding-inline-start: 12px;
}

.widget-title::before {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   top: 15%;
   bottom: 15%;
   width: 4px;
   border-radius: 6px;
   background: var(--grad);
}

.sidebar-links a {
   font-size: 12px;
   display: flex;
   gap: 8px;
   align-items: center;
   margin-bottom: 10px;
   transition: .2s;
}

.sidebar-links a::before {
   content: "‹";
   color: var(--primary);
   font-weight: 800;
   transform: rotate(180deg);
}

.sidebar-links a:hover {
   padding-inline-start: 5px;
}

.mini-post {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 12px;
}

.mini-post:last-child {
   margin-bottom: 0;
}

.mini-thumb {
   width: 66px;
   height: 50px;
   border-radius: 9px;
   flex-shrink: 0;
   display: grid;
   place-items: center;
   overflow: hidden;
   position: relative;
}

.mini-thumb img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 9px;
   transition: transform .3s ease;
}

.mini-post:hover .mini-thumb img {
   transform: scale(1.08);
}

.mini-thumb svg {
   width: 20px;
   height: 20px;
   color: #fff;
   opacity: .85;
}

.mini-post h5 {
   font-size: 11.5px;
   font-weight: 700;
   line-height: 1.7;
}

.mini-post:hover h5 {
   color: var(--primary);
}

.mini-post time {
   font-size: 10px;
   color: var(--muted);
}

.cat-row {
   display: flex;
   justify-content: space-between;
   font-size: 12px;
   padding: 8px 4px;
   border-bottom: 1px dashed var(--border);
}

.cat-row:last-child {
   border: 0;
}

.cat-row b {
   color: var(--primary);
}

.featured-img {
   margin-bottom: 18px;
}

.featured-img img {
   width: 100%;
   height: auto;
   border-radius: 14px;
   display: block;
}

.post-content {
   padding: 28px;
   font-size: 13.5px;
   line-height: 2.5;
}

.post-content h2 {
   font-size: 19px;
   font-weight: 800;
   margin: 28px 0 12px;
   position: relative;
   padding-inline-start: 13px;
}

.post-content h2::before {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   top: 15%;
   bottom: 15%;
   width: 4px;
   border-radius: 6px;
   background: var(--grad);
}

.post-content h3 {
   font-size: 15.5px;
   font-weight: 800;
   margin: 20px 0 10px;
}

.post-content p {
   margin-bottom: 14px;
   color: #454a63;
}

.post-content blockquote {
   background: var(--primary-softer);
   border-radius: 12px;
   padding: 16px 20px;
   margin: 20px 0;
   font-weight: 700;
   color: var(--text);
}

.post-content pre {
   background: #0f1220;
   color: #dbe2f1;
   border-radius: 12px;
   padding: 18px;
   direction: ltr;
   text-align: left;
   font-size: 12px;
   overflow: auto;
   margin: 20px 0;
   line-height: 1.9;
}

.post-content figure {
   margin: 20px 0;
}

.post-content figcaption {
   font-size: 11px;
   color: var(--muted);
   text-align: center;
   margin-top: 8px;
}

.img-ph {
   height: 280px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   color: #fff;
}

.img-ph svg {
   width: 52px;
   height: 52px;
   opacity: .85;
}

.toc {
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 18px 22px;
   background: var(--primary-softer);
   margin-bottom: 22px;
}

.toc h4 {
   font-size: 13.5px;
   font-weight: 800;
   margin-bottom: 10px;
   display: flex;
   gap: 8px;
   align-items: center;
}

.toc h4 svg {
   width: 16px;
   height: 16px;
   color: var(--primary);
}

.toc ol {
   padding-inline-start: 18px;
   font-size: 12.5px;
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.toc a:hover {
   color: var(--primary);
}

.author-box {
   display: flex;
   gap: 16px;
   padding: 22px;
   align-items: center;
}

.avatar {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--grad);
   color: #fff;
   display: grid;
   place-items: center;
   font-weight: 800;
   font-size: 20px;
   flex-shrink: 0;
}

.post-nav {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
}

.post-nav a {
   padding: 16px 18px;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-size: 12px;
   font-weight: 700;
   transition: .2s;
}

.post-nav a:hover {
   border-color: var(--primary);
   color: var(--primary);
}

.post-nav small {
   color: var(--muted);
   font-size: 10.5px;
}

.post-nav .--next {
   align-items: flex-end;
   text-align: left;
}

.skeleton {
   background: linear-gradient(90deg, #eef0f7 25%, #f8f9fd 50%, #eef0f7 75%);
   background-size: 200% 100%;
   animation: sh 1.2s infinite;
   border-radius: 10px;
}

@keyframes sh {
   to {
      background-position: -200% 0;
   }
}

.alert {
   border-radius: 12px;
   padding: 12px 16px;
   font-size: 12.5px;
   font-weight: 700;
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 14px;
}

.alert svg {
   width: 17px;
   height: 17px;
   flex-shrink: 0;
}

.alert.--success {
   background: #ecfdf5;
   color: #047857;
   border: 1px solid #a7f3d0;
}

.alert.--error {
   background: #fef2f2;
   color: #b91c1c;
   border: 1px solid #fecaca;
}

.alert.--info {
   background: var(--primary-softer);
   color: var(--primary);
   border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

.input,
.textarea,
.select {
   width: 100%;
   background: var(--field);
   border: 1px solid transparent;
   border-radius: 10px;
   padding: 11px 14px;
   font: inherit;
   font-size: 12.5px;
   outline: none;
   transition: .2s;
   color: var(--text);
}

.input:focus,
.textarea:focus,
.select:focus {
   border-color: var(--primary);
   background: var(--surface);
   box-shadow: 0 0 0 4px var(--ring);
}

.input.is-error {
   border-color: var(--error);
   background: #fef2f2;
}

.textarea {
   min-height: 130px;
   resize: vertical;
}

.field-label {
   font-size: 11.5px;
   font-weight: 700;
   margin-bottom: 6px;
   display: block;
}

/* نظرات وردپرس */
.comments-area {
   margin-top: 22px;
}

.comments-title,
.comment-reply-title {
   font-size: 15px;
   font-weight: 800;
   margin-bottom: 14px;
   position: relative;
   padding-inline-start: 13px;
}

.comments-title::before,
.comment-reply-title::before {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   top: 15%;
   bottom: 15%;
   width: 4px;
   border-radius: 6px;
   background: var(--grad);
}

.comment-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.comment-list .comment {
   display: flex;
   gap: 14px;
   padding: 18px 0;
   border-bottom: 1px dashed var(--border);
}

.comment-list .comment-body {
   flex: 1;
}

.comment-list .comment-author {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 12.5px;
   font-weight: 800;
}

.comment-list .comment-author img {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: var(--primary-soft);
}

.comment-list .comment-metadata,
.comment-list .comment-metadata a {
   color: var(--muted);
   font-size: 10.5px;
}

.comment-list .comment-body>p {
   font-size: 12px;
   color: var(--muted);
   margin-top: 6px;
}

.comment-list .reply a {
   color: var(--primary);
   font-size: 11px;
   font-weight: 800;
}

.comment-list .children {
   margin-inline-start: 56px;
   list-style: none;
}

.no-comments {
   color: var(--muted);
   font-size: 12px;
   padding: 12px 0;
}

.comment-form p {
   margin-bottom: 12px;
}

.comment-form label {
   display: block;
   font-size: 11.5px;
   font-weight: 700;
   margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
   width: 100%;
   background: var(--field);
   border: 1px solid transparent;
   border-radius: 10px;
   padding: 11px 14px;
   font: inherit;
   font-size: 12.5px;
   outline: none;
   transition: .2s;
   color: var(--text);
}

.comment-form input:focus,
.comment-form textarea:focus {
   border-color: var(--primary);
   background: var(--surface);
   box-shadow: 0 0 0 4px var(--ring);
}

.comment-form textarea {
   min-height: 130px;
   resize: vertical;
}

.form-submit .submit {
   background: var(--grad);
   color: #fff;
   border: 0;
   border-radius: var(--r-md);
   font-family: inherit;
   font-weight: 700;
   font-size: 13px;
   padding: 10px 24px;
   cursor: pointer;
   box-shadow: 0 6px 16px var(--ring);
   transition: .2s;
}

.form-submit .submit:hover {
   filter: brightness(1.08);
}

/* ========== ۱۳) محصول تکی ========== */
.product-single {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 320px;
   gap: 20px;
   align-items: start;
}

.gallery {
   padding: 26px;
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.gallery-main {
   height: 320px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   background: var(--field);
}

.gallery-main .p-icon {
   width: 130px;
   height: 130px;
   border-radius: 32px;
   display: grid;
   place-items: center;
   color: #fff;
}

.gallery-main .p-icon svg {
   width: 64px;
   height: 64px;
}

.gallery-thumbs {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}

.g-thumb {
   height: 64px;
   border-radius: 10px;
   border: 2px solid transparent;
   display: grid;
   place-items: center;
   background: var(--field);
   cursor: pointer;
   transition: .2s;
}

.g-thumb.is-active,
.g-thumb:hover {
   border-color: var(--primary);
}

.buy-box {
   padding: 22px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   position: sticky;
   top: 86px;
}

.price-big {
   display: flex;
   align-items: center;
   gap: 12px;
   justify-content: center;
   padding: 12px;
   border: 1px dashed var(--border);
   border-radius: 12px;
   flex-wrap: wrap;
}

.price-big .now {
   font-size: 21px;
   font-weight: 800;
   color: var(--primary);
}

.price-big .old {
   color: var(--muted);
   text-decoration: line-through;
   font-size: 12px;
}

.price-big ins {
   text-decoration: none;
   color: var(--primary);
   font-weight: 800;
   font-size: 20px;
}

.price-big del {
   color: var(--muted);
   font-size: 12px;
   margin-inline-end: 8px;
}

.guarantee {
   display: flex;
   gap: 8px;
   align-items: center;
   font-size: 10.5px;
   color: var(--muted);
   justify-content: flex-start;
}

.guarantee svg {
   width: 15px;
   height: 15px;
   color: var(--success);
}

.product-form .quantity .qty {
   width: 64px;
   height: 46px;
   border: 1px solid var(--border);
   border-radius: 10px;
   text-align: center;
   font: inherit;
   background: var(--field);
   color: var(--text);
}

.product-form .single_add_to_cart_button {
   background: var(--grad);
   color: #fff;
   border: 0;
   border-radius: var(--r-md);
   font-family: inherit;
   font-weight: 700;
   font-size: 13px;
   padding: 12px 22px;
   cursor: pointer;
   box-shadow: 0 6px 16px var(--ring);
}

.product-form .wc-pao-addon,
.product-form .addon {
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 12px 14px;
   margin-bottom: 10px;
   background: var(--field);
}

.product-form .wc-pao-addon-name,
.product-form .addon-name {
   font-size: 12px;
   font-weight: 800;
   color: var(--text);
}

.product-form .wc-pao-addon-price,
.product-form .addon-price {
   color: var(--primary);
   font-size: 11px;
   font-weight: 700;
}

.product-form select,
.product-form input[type="text"],
.product-form input[type="number"],
.product-form textarea {
   width: 100%;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 9px 12px;
   font: inherit;
   font-size: 12px;
   color: var(--text);
}

.product-form input[type="checkbox"],
.product-form input[type="radio"] {
   accent-color: var(--primary);
   width: 16px;
   height: 16px;
}

.product-form label {
   font-size: 11.5px;
   font-weight: 600;
}

.product-form [class*="subscription"],
.product-form .subscription-details {
   font-size: 11px;
   color: var(--muted);
}

.product-form .woocommerce-price-suffix {
   font-size: 10px;
   color: var(--muted);
}

.stock.in-stock {
   color: var(--success);
   font-weight: 700;
   font-size: 11px;
}

.stock.out-of-stock {
   color: var(--error);
   font-weight: 700;
   font-size: 11px;
}

.btn-affiliate {
   background: linear-gradient(135deg, var(--primary) 20%, #f59e0b 130%);
   color: #fff;
   position: relative;
   overflow: hidden;
   box-shadow: 0 8px 22px var(--ring);
   font-size: 14px;
}

.btn-affiliate::after {
   content: "";
   position: absolute;
   top: 0;
   inset-inline-start: -70%;
   width: 45%;
   height: 100%;
   background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .4), transparent);
   transition: .6s ease;
}

.btn-affiliate:hover::after {
   inset-inline-start: 130%;
}

.btn-affiliate:hover {
   transform: translateY(-2px);
}

.affiliate-note {
   font-size: 10px;
   color: var(--muted);
   text-align: center;
}

/* ========== ۱۴) ۴۰۴ و نتایج جستجو ========== */
.err-wrap {
   text-align: center;
   padding: 70px 20px;
   position: relative;
}

.err-num {
   font-size: 120px;
   font-weight: 800;
   line-height: 1;
   background: var(--grad);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   letter-spacing: -4px;
}

.err-title {
   font-size: 20px;
   font-weight: 800;
   margin: 14px 0 8px;
}

.err-desc {
   color: var(--muted);
   font-size: 13px;
   max-width: 460px;
   margin: 0 auto 24px;
}

.err-search {
   max-width: 420px;
   margin: 0 auto 22px;
}

.err-wrap .search-box {
   margin: 20px 0;
}

.err-links {
   display: flex;
   gap: 8px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 22px;
}

.result-card {
   display: flex;
   gap: 16px;
   padding: 18px;
   align-items: center;
   transition: .2s;
}

.result-card:hover {
   box-shadow: var(--sh2);
   transform: translateY(-3px);
}

.result-icon {
   width: 60px;
   height: 60px;
   border-radius: 14px;
   flex-shrink: 0;
   display: grid;
   place-items: center;
   color: #fff;
}

.result-icon svg {
   width: 30px;
   height: 30px;
}

.result-icon.result-thumb {
   background: var(--field);
   padding: 0;
   overflow: hidden;
}

.result-icon.result-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.result-body {
   flex: 1;
}

.result-type {
   padding: 2px 10px;
   border-radius: 99px;
   font-size: 9.5px;
   font-weight: 800;
   background: var(--primary-soft);
   color: var(--primary);
}

.result-type.post {
   background: rgba(244, 63, 94, .14);
   color: #e11d48;
}

.result-type.product {
   background: rgba(249, 115, 22, .14);
   color: #ea580c;
}

.result-type.icodito_plugin {
   background: rgba(139, 92, 246, .14);
   color: #7c3aed;
}

.result-type.icodito_app {
   background: rgba(99, 102, 241, .14);
   color: #4f46e5;
}

.result-type.icodito_font {
   background: rgba(16, 185, 129, .14);
   color: #059669;
}

.result-version {
   background: var(--field);
   border-radius: 6px;
   padding: 1px 8px;
   font-size: 9.5px;
   font-weight: 700;
   color: var(--muted);
}

/* ========== ۱۵) فوتر ========== */
.footer {
   background: var(--footer);
   color: #a2a8bd;
   margin-top: 44px;
   padding: 48px 24px 0;
}

.footer-grid {
   max-width: 1250px;
   margin: auto;
   display: grid;
   grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
   gap: 34px;
}

.footer h4 {
   color: #fff;
   font-size: 14px;
   font-weight: 800;
   margin-bottom: 16px;
}

.footer p {
   font-size: 11.5px;
   line-height: 2.1;
}

.footer-links li {
   list-style: none;
}

.footer-links a {
   font-size: 12px;
   display: flex;
   gap: 8px;
   align-items: center;
   margin-bottom: 10px;
   transition: .2s;
}

.footer-links a::before {
   content: "‹";
   color: var(--primary);
   font-weight: 800;
   transform: rotate(180deg);
}

.footer-links a:hover {
   color: #fff;
   padding-inline-start: 5px;
}

.footer .brand {
   justify-content: flex-start;
   color: #fff;
   margin-bottom: 14px;
}

.social {
   display: flex;
   gap: 8px;
   margin-top: 16px;
}

.social a {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: #161d33;
   display: grid;
   place-items: center;
   transition: .2s;
}

.social a svg {
   width: 16px;
   height: 16px;
   fill: #fff;
}

.social a:hover {
   background: var(--primary);
   color: #fff;
   transform: translateY(-3px);
}

.contact-row {
   display: flex;
   gap: 9px;
   align-items: center;
   font-size: 11.5px;
   margin-bottom: 11px;
}

.contact-row svg {
   width: 15px;
   height: 15px;
   color: var(--primary);
   flex-shrink: 0;
}

.trust-row {
   display: flex;
   gap: 10px;
   margin-top: 16px;
   flex-wrap: wrap;
}

.trust-box {
   width: 74px;
   height: 86px;
   border-radius: 12px;
   background: #161d33;
   border: 1px solid #232c47;
   display: grid;
   place-items: center;
   font-size: 8.5px;
   text-align: center;
   padding: 6px;
   transition: .2s;
}

.trust-box:hover {
   border-color: var(--primary);
}

.footer-bottom {
   border-top: 1px solid #1c2337;
   margin-top: 36px;
   padding: 18px 0;
   display: flex;
   justify-content: space-between;
   gap: 12px;
   font-size: 11px;
   max-width: 1250px;
   margin-inline: auto;
   flex-wrap: wrap;
}

.footer-bottom a:hover {
   color: #fff;
}

.footer-bottom .links {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
}

/* ========== ۱۶) رنگ لوگوها / placeholder ========== */
.bg-rankmath {
   background: linear-gradient(135deg, #a855f7, #6d28d9);
}

.bg-yoast {
   background: linear-gradient(135deg, #ec4899, #a21caf);
}

.bg-elementor {
   background: linear-gradient(135deg, #f472b6, #9333ea);
}

.bg-woo {
   background: linear-gradient(135deg, #96588a, #7b4b94);
}

.bg-wprocket {
   background: linear-gradient(135deg, #fb923c, #ea580c);
}

.bg-akismet {
   background: linear-gradient(135deg, #394931, #1c2617);
}

.bg-ps {
   background: #001e36;
}

.bg-ai {
   background: #330000;
}

.bg-aa {
   background: #111;
}

.g1 {
   background: linear-gradient(135deg, #bfdbfe, #818cf8);
}

.g2 {
   background: linear-gradient(135deg, #fbcfe8, #f59e0b);
}

.g3 {
   background: linear-gradient(135deg, #a7f3d0, #38bdf8);
}

.g4 {
   background: linear-gradient(135deg, #c7d2fe, #f0abfc);
}

.g5 {
   background: linear-gradient(135deg, #fda4af, #fbbf24);
}

.g6 {
   background: linear-gradient(135deg, #93c5fd, #1e293b);
}

.g7 {
   background: linear-gradient(135deg, #6ee7b7, #3b82f6);
}

.g8 {
   background: linear-gradient(135deg, #fde68a, #ef4444);
}

/* ========== ۱۷) جستجوی زنده ========== */
.ajax-search-results {
   position: absolute;
   top: calc(100% + 8px);
   inset-inline: 0;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   box-shadow: var(--sh2);
   z-index: 300;
   overflow: hidden;
   display: none;
}

.search-results-list {
   list-style: none;
   margin: 0;
   padding: 6px;
   max-height: 400px;
   overflow-y: auto;
}

.search-results-list li a {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px;
   border-radius: var(--r-md);
   transition: background .15s;
}

.search-results-list li a:hover {
   background: var(--primary-softer);
}

.result-image {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   object-fit: cover;
   flex-shrink: 0;
   background: var(--field);
}

.result-details {
   min-width: 0;
}

.result-title {
   font-size: 12.5px;
   font-weight: 700;
   margin-bottom: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.hero-search .result-title {
   color: #001b42;
}

.result-meta {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 10px;
   color: var(--muted);
   flex-wrap: wrap;
}

.result-price {
   font-weight: 800;
   color: var(--primary);
   font-size: 10.5px;
}

.result-date {
   color: var(--muted);
}

.search-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 20px;
   color: var(--muted);
   font-size: 12px;
}

.search-loading i {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid var(--primary-soft);
   border-top-color: var(--primary);
   animation: spin .7s linear infinite;
}

.no-results {
   padding: 22px;
   text-align: center;
   color: var(--muted);
   font-size: 12px;
}

/* ========== ۱۸) صفحات Single دانلود ========== */
.single-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 290px;
   gap: 20px;
   align-items: start;
}

.side-stack {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.side-card {
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.section-title {
   font-size: 15px;
   font-weight: 800;
   margin-bottom: 12px;
}

.side-card>.section-title {
   text-align: center;
}

.head-card {
   padding: 26px;
}

.head-top {
   display: flex;
   align-items: center;
   gap: 18px;
}

.head-icon {
   flex-shrink: 0;
   width: 92px;
   height: 92px;
   border-radius: 22px;
   display: grid;
   place-items: center;
   color: #fff;
   box-shadow: var(--sh1);
   overflow: hidden;
}

.head-icon img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 22px;
}

.head-icon svg {
   width: 44px;
   height: 44px;
}

.head-info {
   flex: 1;
}

.head-info h1 {
   font-size: 21px;
   font-weight: 800;
   margin-bottom: 6px;
}

.head-info .desc {
   color: var(--muted);
   font-size: 12px;
   margin-bottom: 8px;
}

.stat-boxes {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   margin-top: 20px;
}

.stat-box {
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 10px 8px;
   text-align: center;
}

.stat-box .label {
   font-size: 10.5px;
   color: var(--muted);
}

.stat-box .value {
   font-size: 12.5px;
   font-weight: 800;
}

.tabs {
   display: flex;
   gap: 2px;
   border-bottom: 1px solid var(--border);
   margin: 20px 0 18px;
   flex-wrap: wrap;
   background: var(--surface);
   border-radius: var(--r-lg);
   box-shadow: var(--sh1);
}

.tab {
   position: relative;
   padding: 11px 18px;
   font-size: 12.5px;
   font-weight: 700;
   color: var(--muted);
   transition: .2s;
}

.tab:hover {
   color: var(--primary);
}

.tab.is-active {
   color: var(--primary);
   font-weight: 800;
}

.tab.is-active::after {
   content: "";
   position: absolute;
   inset-inline: 14px;
   bottom: -1px;
   height: 3px;
   border-radius: 4px;
   background: var(--primary);
}

.about-text {
   font-size: 15px;
   color: var(--muted);
   line-height: 2.2;
   margin-bottom: 18px;
   background: var(--surface);
   border-radius: var(--r-lg);
   box-shadow: var(--sh1);
   border: 1px solid var(--border);
   padding: 26px;
}

.about-text b {
   color: var(--text);
}

.browser-shot {
   background: #fff;
   border-radius: 10px;
   box-shadow: var(--sh2);
   overflow: hidden;
}

.browser-shot .bar {
   height: 24px;
   background: #e9ebf5;
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 0 10px;
}

.browser-shot .bar i {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #cdd2e6;
}

.browser-shot .bar i:nth-child(1) {
   background: #f2a1a1;
}

.browser-shot .body {
   display: flex;
   gap: 10px;
   padding: 12px;
   height: 160px;
}

.browser-shot .col-side {
   flex: 0 0 32%;
   background: #f2f4fb;
   border-radius: 6px;
}

.browser-shot .col-main {
   flex: 1;
   border-radius: 6px;
   background: repeating-linear-gradient(to bottom, #eef1fa 0 12px, transparent 12px 26px);
}

.browser-shot.--sm .body {
   height: 115px;
   padding: 10px;
}

.promo {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   background: var(--grad);
   border-radius: var(--r-lg);
   padding: 18px 22px;
   margin: 18px 0;
   color: #fff;
   flex-wrap: wrap;
}

.promo-brand .logo-row {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 800;
   font-size: 14px;
}

.promo-brand small {
   display: block;
   opacity: .85;
   font-size: 11px;
   margin-top: 4px;
}

.promo-shot {
   flex: 0 0 46%;
}

.promo-img {
   width: 100%;
   display: block;
   object-fit: cover;
   max-height: 190px;
   border-radius: 0 0 10px 10px;
}

.media-shot {
   border: 1px solid var(--border);
   border-radius: 12px;
   overflow: hidden;
   margin: 18px 0 12px;
   max-width: 900px;
   max-height: 500px;
}

.media-shot .canvas {
   height: 230px;
   background: linear-gradient(160deg, #0e2a4a, #155a8a 55%, #0b1f38);
   display: flex;
}

.media-shot .tool {
   flex: 0 0 34px;
   background: #101318;
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: center;
   padding: 10px 0;
}

.media-shot .tool i {
   width: 16px;
   height: 16px;
   border-radius: 4px;
   background: #2c3440;
}

.media-shot .panel {
   flex: 0 0 60px;
   background: #161b22;
   margin-inline-start: auto;
}

.media-shot .gallery-main-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.thumbs {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 10px;
   margin-bottom: 18px;
}

.thumb {
   height: 52px;
   border-radius: 8px;
   border: 1px solid var(--border);
   background: linear-gradient(160deg, #122033, #155a8a);
   position: relative;
   overflow: hidden;
}

.thumb::after {
   content: "";
   position: absolute;
   inset: auto 8px 8px 8px;
   height: 6px;
   border-radius: 4px;
   background: rgba(255, 255, 255, .25);
}

.thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 7px;
}

.thumbs .thumb.--real {
   background: var(--field);
   padding: 0;
   cursor: pointer;
}

.thumbs .thumb.--real::after {
   display: none;
}

.thumbs .thumb.--real.is-active,
.thumbs .thumb.--real:hover {
   border-color: var(--primary);
}

.gallery-wrap {
   margin-top: 18px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.dl-note {
   font-size: 10.5px;
   color: var(--muted);
   text-align: center;
}

.link-inline {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   color: var(--primary);
   font-size: 12px;
   font-weight: 800;
}

.link-inline svg {
   width: 15px;
   height: 15px;
}

.info-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 9px 2px;
   border-bottom: 1px dashed var(--border);
   font-size: 11.5px;
   gap: 8px;
}

.info-row:last-child {
   border-bottom: 0;
}

.info-row .key {
   color: var(--muted);
}

.info-row .val {
   font-weight: 800;
}

.dl-rows {
   display: flex;
   flex-direction: column;
   gap: 9px;
}

.dl-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 9px 14px;
   font-size: 12px;
   font-weight: 800;
   transition: .2s;
}

.dl-row:hover {
   border-color: var(--primary);
   background: var(--primary-softer);
   color: var(--primary);
}

.dl-row svg {
   width: 15px;
   height: 15px;
   color: currentColor;
}

.dl-row-buy {
   border: 1.5px solid var(--success);
   color: var(--success);
   background: rgba(5, 150, 105, .06);
   padding: 11px 18px;
   border-radius: var(--r-md);
   width: 100%;
   font-size: 13px;
   line-height: 1;
}

.dl-row-buy:hover {
   background: var(--success);
   color: #fff;
   border-color: var(--success);
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(5, 150, 105, .25);
}

.dl-row-buy svg {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   transition: transform .3s ease;
}

.dl-row-buy:hover svg {
   transform: rotate(-8deg) scale(1.08);
}

.features-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 14px;
   margin-top: 18px;
}

.feature {
   padding: 18px 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   text-align: center;
   font-size: 11px;
   font-weight: 700;
}

.feature-icon {
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: var(--primary-soft);
   color: var(--primary);
   display: grid;
   place-items: center;
}

.feature-icon svg {
   width: 22px;
   height: 22px;
}

.code-block {
   position: relative;
   background: #0f1220;
   border-radius: 12px;
   overflow: hidden;
   margin-top: 10px;
}

.code-block pre {
   margin: 0 !important;
   padding: 18px 20px !important;
   font-size: 12px !important;
   line-height: 1.8 !important;
   color: #dbe2f1;
   overflow-x: auto;
}

.code-block code {
   font-family: 'JetBrains Mono', 'Courier New', monospace;
   color: #a5b4fc;
}

.copy-btn {
   position: absolute;
   top: 10px;
   inset-inline-end: 10px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .15);
   color: #cfd6e4;
   border-radius: 8px;
   font-family: inherit;
   font-size: 11px;
   font-weight: 700;
   cursor: pointer;
   transition: .2s;
   z-index: 2;
}

.copy-btn svg {
   width: 13px;
   height: 13px;
}

.copy-btn:hover {
   background: rgba(255, 255, 255, .18);
   color: #fff;
}

.copy-btn.is-copied {
   background: var(--success);
   color: #fff;
   border-color: transparent;
}

/* ========== ۱۹) نظرات اختصاصی (icd) ========== */
.comments-heading {
   font-size: 15px;
   font-weight: 800;
   margin-bottom: 14px;
   position: relative;
   padding-inline-start: 13px;
}

.comments-heading::before {
   content: "";
   position: absolute;
   inset-inline-start: 0;
   top: 15%;
   bottom: 15%;
   width: 4px;
   border-radius: 6px;
   background: var(--grad);
}

.icd-comments .comment-list .children {
   margin-inline-start: 52px;
}

.icd-comment {
   display: flex;
   gap: 14px;
   padding: 18px 4px;
   border-bottom: 1px dashed var(--border);
}

.icd-comment .avatar {
   width: 46px;
   height: 46px;
   font-size: 15px;
   flex-shrink: 0;
}

.icd-comment-body {
   flex: 1;
   min-width: 0;
}

.icd-comment-head {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   font-size: 12px;
}

.icd-comment-head b {
   font-size: 12.5px;
}

.icd-comment-head time {
   color: var(--muted);
   font-size: 10.5px;
}

.icd-comment-head .reply-link a {
   color: var(--primary);
   font-size: 11px;
   font-weight: 800;
}

.icd-comment-text {
   font-size: 12.5px;
   color: var(--muted);
   margin-top: 6px;
   line-height: 2.1;
}

.icd-comment-text p {
   margin: 0;
}

.icd-comment-form .comment-form-comment {
   margin-bottom: 12px;
}

.icd-comment-form .form-grid {
   margin-bottom: 12px;
}

.icd-comment-form .form-grid p {
   margin: 0;
}

/* ========== ۲۰) سیستم امتیازدهی ========== */
.icodito-rating-container {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 22px 24px;
   box-shadow: var(--sh1);
   transition: background-color .3s ease, border-color .3s ease;
}

.icodito-rating-container .rating-title {
   font-size: 14px;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 14px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.icodito-rating-container .rating-title .emoji {
   width: 20px;
   height: 20px;
}

.icodito-rating-container .stars-wrapper {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
}

.icodito-rating-container .star {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: var(--field);
   color: var(--muted);
   cursor: pointer;
   transition: all .2s ease;
   border: 1px solid transparent;
}

.icodito-rating-container .star svg {
   width: 26px;
   height: 26px;
   transition: all .2s ease;
}

.icodito-rating-container .star:hover {
   background: var(--primary-softer);
   color: var(--star);
   border-color: color-mix(in srgb, var(--star) 30%, transparent);
   transform: translateY(-2px) scale(1.05);
}

.icodito-rating-container .star.active {
   background: linear-gradient(135deg, #fff8e1, #fef3c7);
   color: var(--star);
   border-color: color-mix(in srgb, var(--star) 40%, transparent);
   box-shadow: 0 2px 8px rgba(246, 167, 35, .25);
}

.icodito-rating-container .star.active svg {
   fill: var(--star);
}

.icodito-rating-container .rating-result {
   margin-inline-start: auto;
   padding: 8px 16px;
   background: var(--primary-soft);
   color: var(--primary);
   border-radius: 99px;
   font-size: 13px;
   font-weight: 800;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
   border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

.icodito-rating-container .rating-message {
   margin-top: 14px;
   border-radius: 10px;
   font-size: 12.5px;
   font-weight: 700;
   overflow: hidden;
}

.icodito-rating-container .rating-message:empty {
   display: none;
}

.icodito-rating-container .rating-message.success {
   background: #ecfdf5;
   color: #047857;
   border: 1px solid #a7f3d0;
   padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.icodito-rating-container .rating-message.error {
   background: #fef2f2;
   color: #b91c1c;
   border: 1px solid #fecaca;
   padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.icodito-rating-container .star.clicked {
   animation: starPulse .5s ease;
}

@keyframes starPulse {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.25);
   }

   100% {
      transform: scale(1);
   }
}

/* ========== ۲۱) لیدربرد رکوردارها ========== */
.top-dl {
   background: linear-gradient(165deg, #131735, #0d1120 65%);
   border: 1px solid #262e4d;
   border-radius: var(--r-xl);
   padding: 26px;
   position: relative;
   overflow: hidden;
}

.top-dl::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(420px 170px at 15% -10%, rgba(139, 92, 246, .16), transparent 60%), radial-gradient(420px 170px at 50% -10%, rgba(99, 102, 241, .13), transparent 60%), radial-gradient(420px 170px at 85% -10%, rgba(52, 211, 153, .13), transparent 60%);
   pointer-events: none;
}

.top-dl-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   position: relative;
}

.top-dl-head {
   display: flex;
   align-items: center;
   gap: 9px;
   margin-bottom: 14px;
   color: #e8ebf7;
   font-size: 13px;
   font-weight: 800;
}

.top-dl-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--col);
   box-shadow: 0 0 14px var(--col);
   flex-shrink: 0;
}

.top-dl-all {
   margin-inline-start: auto;
   font-size: 10.5px;
   font-weight: 600;
   color: #8d96b8;
   transition: .2s;
}

.top-dl-all:hover {
   color: var(--col);
}

.top-dl-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.top-dl-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 10px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .035);
   border: 1px solid rgba(255, 255, 255, .06);
   transition: .2s;
}

.top-dl-item:hover {
   background: rgba(255, 255, 255, .08);
   border-color: color-mix(in srgb, var(--col) 50%, transparent);
   transform: translateY(-2px);
}

.top-dl-rank {
   width: 22px;
   height: 22px;
   border-radius: 8px;
   display: grid;
   place-items: center;
   font-size: 11px;
   font-weight: 800;
   color: #8d96b8;
   background: rgba(255, 255, 255, .07);
   flex-shrink: 0;
}

.top-dl-item.is-first .top-dl-rank {
   background: linear-gradient(135deg, #fde68a, #f59e0b);
   color: #4a2e05;
   box-shadow: 0 4px 14px rgba(245, 158, 11, .35);
}

.top-dl-thumb {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   overflow: hidden;
   display: grid;
   place-items: center;
   background: rgba(255, 255, 255, .09);
   color: #cbd2e6;
   flex-shrink: 0;
}

.top-dl-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.top-dl-thumb svg {
   width: 19px;
   height: 19px;
}

.top-dl-title {
   flex: 1;
   min-width: 0;
   font-size: 12px;
   font-weight: 700;
   color: #e8ebf7;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: .2s;
}

.top-dl-item:hover .top-dl-title {
   color: var(--col);
}

.top-dl-count {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 10.5px;
   font-weight: 700;
   color: #8d96b8;
   flex-shrink: 0;
}

.top-dl-count svg {
   width: 13px;
   height: 13px;
   color: var(--col);
}

/* ========== ۲۲) منوی کشویی موبایل (Drawer) ========== */
.menu-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(10, 12, 24, .55);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   opacity: 0;
   visibility: hidden;
   transition: opacity .35s ease, visibility .35s;
   z-index: 500;
   cursor: pointer;
}

.menu-backdrop.is-open {
   opacity: 1;
   visibility: visible;
}

.mobile-menu {
   position: fixed;
   top: 0;
   right: 0;
   height: 100vh;
   height: 100dvh;
   width: min(340px, 88vw);
   background: var(--surface);
   border-inline-start: 1px solid var(--border);
   box-shadow: -20px 0 60px rgba(15, 23, 42, .25);
   transform: translateX(100%);
   transition: transform .4s cubic-bezier(.22, .9, .31, 1);
   z-index: 501;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.mobile-menu.is-open {
   transform: translateX(0);
}

.mobile-menu-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 16px 18px;
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
}

.mobile-menu-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 15px;
   font-weight: 800;
   color: var(--text);
}

.mobile-menu-brand .brand-icon {
   width: 28px;
   height: 28px;
   color: var(--primary);
}

.mobile-menu-brand svg {
   width: 100%;
   height: 100%;
}

.mobile-menu-close {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: var(--field);
   display: grid;
   place-items: center;
   color: var(--muted);
   transition: .2s;
   border: 1px solid transparent;
}

.mobile-menu-close svg {
   width: 18px;
   height: 18px;
}

.mobile-menu-close:hover {
   background: var(--primary-softer);
   color: var(--primary);
   transform: rotate(90deg);
}

.mobile-menu-nav {
   flex: 1;
   overflow-y: auto;
   padding: 10px 8px;
}

.mobile-menu-list,
.mobile-menu-nav>ul {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.mobile-menu-list li a,
.mobile-menu-nav .page_item>a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 11px 14px;
   border-radius: 10px;
   color: var(--text);
   font-size: 13.5px;
   font-weight: 600;
   transition: .18s;
   position: relative;
}

.mobile-menu-list li a:hover,
.mobile-menu-nav .page_item>a:hover,
.mobile-menu-list li.current-menu-item>a,
.mobile-menu-nav .current_page_item>a {
   background: var(--primary-softer);
   color: var(--primary);
}

.mobile-menu-list li.current-menu-item>a::before,
.mobile-menu-nav .current_page_item>a::before {
   content: "";
   position: absolute;
   inset-inline-start: 2px;
   top: 22%;
   bottom: 22%;
   width: 3px;
   border-radius: 4px;
   background: var(--primary);
}

.mobile-menu-list .sub-menu,
.mobile-menu-nav .children {
   margin: 4px 0 0;
   padding: 4px 0 4px 14px;
   display: none;
   border-inline-start: 1px dashed var(--border);
}

.mobile-menu-list .menu-item-has-children.is-open>.sub-menu,
.mobile-menu-nav .page_item_has_children.is-open>.children {
   display: block;
}

.mobile-menu-list .sub-menu li a,
.mobile-menu-nav .children li a {
   padding: 9px 12px;
   font-size: 12.5px;
   font-weight: 500;
   color: var(--muted);
}

.mobile-menu-list .sub-menu li a:hover,
.mobile-menu-nav .children li a:hover {
   color: var(--primary);
   background: var(--primary-softer);
}

.mobile-menu-list .menu-item-has-children>a::after,
.mobile-menu-nav .page_item_has_children>a::after {
   content: "";
   width: 14px;
   height: 14px;
   margin-inline-start: auto;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b90a5' stroke-width='2.4' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
   background-repeat: no-repeat;
   background-size: contain;
   transition: transform .25s ease;
   flex-shrink: 0;
}

.mobile-menu-list .menu-item-has-children.is-open>a::after,
.mobile-menu-nav .page_item_has_children.is-open>a::after {
   transform: rotate(180deg);
}

.mobile-menu-actions {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 14px;
   border-top: 1px solid var(--border);
   flex-shrink: 0;
}

.mobile-menu-actions .btn {
   font-size: 13px;
   font-weight: 700;
   padding: 11px 14px;
}

.mobile-menu-actions .btn svg {
   width: 18px;
   height: 18px;
}

/* ========== ۲۳) بازگشت به بالا ========== */
.to-top {
   position: fixed;
   bottom: 22px;
   inset-inline-end: 22px;
   width: 44px;
   height: 44px;
   border-radius: 14px;
   background: var(--grad);
   color: #fff;
   border: 0;
   cursor: pointer;
   display: grid;
   place-items: center;
   box-shadow: 0 8px 20px var(--ring);
   opacity: 0;
   pointer-events: none;
   transform: translateY(10px);
   transition: .3s;
   z-index: 80;
}

.to-top.show {
   opacity: 1;
   pointer-events: auto;
   transform: none;
}

.to-top:hover {
   filter: brightness(1.08);
   transform: translateY(-2px);
}

.to-top svg {
   width: 18px;
   height: 18px;
}

/* ========== ۲۴) دارک‌مود ========== */
.dark {
   color-scheme: dark;
   --bg: #171b28;
   --surface: #20263a;
   --field: #2a3145;
   --text: #e8ebf7;
   --muted: #9aa4c0;
   --border: #2f3750;
   --star-e: #3a4260;
   --footer: #12151f;
   --sh1: 0 1px 2px rgba(0, 0, 0, .30);
   --sh2: 0 16px 38px rgba(0, 0, 0, .42);
   --bg-topbar: linear-gradient(220deg, rgb(52 52 52/75%), rgb(149 149 149/50%)), radial-gradient(circle at 20% 10%, rgb(0 0 0/65%), transparent 40%);
}

/* ---------- دارک‌مود اسکرول‌بار (شامل اسکرول اصلی مرورگر) ---------- */
html.dark,
html.dark * {
   scrollbar-color: color-mix(in srgb, var(--primary) 70%, #fff) transparent;
}

html.dark::-webkit-scrollbar-thumb,
html.dark *::-webkit-scrollbar-thumb {
   background: color-mix(in srgb, var(--primary) 50%, transparent);
   background-clip: padding-box;
}

html.dark::-webkit-scrollbar-thumb:hover,
html.dark *::-webkit-scrollbar-thumb:hover {
   background: color-mix(in srgb, var(--primary) 80%, #fff);
   background-clip: padding-box;
}

.dark.theme-home {
   --primary-soft: rgba(56, 189, 248, .16);
   --primary-softer: rgba(56, 189, 248, .08);
}

.dark.theme-blog {
   --primary-soft: rgba(255, 251, 235, .16);
   --primary-softer: rgba(255, 251, 235, .08);
}

.dark.theme-product {
   --primary-soft: rgba(249, 115, 22, .16);
   --primary-softer: rgba(249, 115, 22, 0.08);
}

.dark.theme-addon {
   --primary-soft: rgba(139, 92, 246, .18);
   --primary-softer: rgba(139, 92, 246, .09);
}

.dark.theme-app {
   --primary-soft: rgba(99, 102, 241, .18);
   --primary-softer: rgba(99, 102, 241, .09);
}

.dark.theme-font {
   --primary-soft: rgba(16, 185, 129, .16);
   --primary-softer: rgba(16, 185, 129, .08);
}

.dark.theme-account {
   --primary-soft: rgba(45, 212, 191, .16);
   --primary-softer: rgba(45, 212, 191, .08);
}

.dark .search-input:focus,
.dark .input:focus,
.dark .textarea:focus,
.dark .select:focus {
   background: var(--surface);
}

.dark .input.is-error {
   background: rgba(239, 68, 68, .10);
}

.dark .post-content p {
   color: #b9c1da;
}

.dark .font-preview {
   color: #f2f4fd;
}

.dark .post-thumb,
.dark .mini-thumb,
.dark .img-ph {
   filter: saturate(.92) brightness(.94);
}

.dark .browser-shot {
   background: #272e42;
}

.dark .browser-shot .bar {
   background: #323a52;
}

.dark .browser-shot .bar i {
   background: #4b5674;
}

.dark .browser-shot .bar i:nth-child(1) {
   background: #e08585;
}

.dark .browser-shot .col-side {
   background: #2c3448;
}

.dark .browser-shot .col-main {
   background: repeating-linear-gradient(to bottom, #2c3448 0 12px, transparent 12px 26px);
}

.dark .skeleton {
   background: linear-gradient(90deg, #232a3d 25%, #2c3448 50%, #232a3d 75%);
   background-size: 200% 100%;
}

.dark .thumb {
   background: linear-gradient(160deg, #1d2436, #2b4a6b);
}

.dark .media-shot .canvas {
   background: linear-gradient(160deg, #101c30, #1b3a5c 55%, #0d1626);
}

.dark .promo-slot {
   background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.dark .alert.--success {
   background: rgba(16, 185, 129, .12);
   color: #7ee7c0;
   border-color: rgba(16, 185, 129, .35);
}

.dark .alert.--error {
   background: rgba(239, 68, 68, .12);
   color: #fca5a5;
   border-color: rgba(239, 68, 68, .35);
}

.dark .alert.--info {
   background: var(--primary-softer);
   color: color-mix(in srgb, var(--primary) 65%, #fff);
   border-color: var(--primary-soft);
}

.dark .badge.--stable {
   background: rgba(16, 185, 129, .14);
   color: #7ee7c0;
   border-color: rgba(16, 185, 129, .35);
}

.dark .badge.--beta {
   background: rgba(245, 158, 11, .14);
   color: #fcd34d;
   border-color: rgba(245, 158, 11, .35);
}

.dark .social a {
   background: var(--field);
}

.dark .trust-box {
   background: var(--field);
   border-color: var(--border);
}

.dark .footer-bottom {
   border-color: #232a3d;
}

.dark .search-results-list li a:hover {
   background: var(--primary-softer);
}

.dark .result-type.post {
   color: #fda4af;
}

.dark .result-type.product {
   color: #fdba74;
}

.dark .result-type.icodito_plugin {
   color: #c4b5fd;
}

.dark .result-type.icodito_app {
   color: #a5b4fc;
}

.dark .result-type.icodito_font {
   color: #6ee7b7;
}

.dark .nav .sub-menu {
   background: #20263a;
   border-color: #2f3750;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.dark .nav .sub-menu .menu-item>a {
   color: #e8ebf7;
}

.dark .nav .sub-menu .menu-item.current-menu-item>a {
   background: var(--primary-soft);
   color: var(--primary);
}

.dark .icd-comment-text {
   color: #b9c1da;
}

.dark .top-dl {
   background: linear-gradient(165deg, #1b2036, #151928 65%);
   border-color: #2f3750;
}

.dark .mobile-menu {
   background: #1c2134;
   border-inline-start-color: #2f3750;
   box-shadow: -20px 0 60px rgba(0, 0, 0, .5);
}

.dark .mobile-menu-close {
   background: #272e42;
   color: #9aa4c0;
}

.dark .menu-backdrop {
   background: rgba(0, 0, 0, .65);
}

.dark .dl-row-buy {
   background: rgba(52, 211, 153, .1);
   border-color: #34d399;
   color: #6ee7b7;
}

.dark .dl-row-buy:hover {
   background: #10b981;
   color: #fff;
   border-color: #10b981;
}

.dark .icodito-rating-container .star {
   background: var(--field);
   color: var(--muted);
}

.dark .icodito-rating-container .star.active {
   background: linear-gradient(135deg, rgba(246, 167, 35, .18), rgba(245, 158, 11, .12));
   color: var(--star);
   border-color: color-mix(in srgb, var(--star) 50%, transparent);
}

.dark .icodito-rating-container .star.active svg {
   fill: #fbbf24;
}

.dark .icodito-rating-container .rating-result {
   background: var(--primary-softer);
   color: color-mix(in srgb, var(--primary) 75%, #fff);
   border-color: var(--primary-soft);
}

.dark .icodito-rating-container .rating-message.success {
   background: rgba(16, 185, 129, .12);
   color: #7ee7c0;
   border-color: rgba(16, 185, 129, .35);
}

.dark .icodito-rating-container .rating-message.error {
   background: rgba(239, 68, 68, .12);
   color: #fca5a5;
   border-color: rgba(239, 68, 68, .35);
}

#modeToggle .i-sun {
   display: none;
}

.dark #modeToggle .i-sun {
   display: block;
}

.dark #modeToggle .i-moon {
   display: none;
}

/* ========== ۲۵) ریسپانسیو یکپارچه (مرتب، بدون تکرار) ========== */
/* ---------- فقط دسکتاپ ---------- */
@media (min-width: 993px) {

   .mobile-menu,
   .menu-backdrop {
      display: none !important;
   }

   .menu-toggle {
      display: none !important;
   }
}

/* ---------- ≤ 1250px ---------- */
@media (max-width: 1250px) {

   .plugin-grid,
   .grid-4 {
      grid-template-columns: repeat(3, 1fr);
   }

   .grid-3 {
      grid-template-columns: repeat(2, 1fr);
   }

   .dl-dash {
      grid-template-columns: 1fr;
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
   }

   .top-dl-grid {
      grid-template-columns: 1fr 1fr;
   }

   .hero-slide {
      aspect-ratio: 16/6;
   }
}

/* ---------- ≤ 992px (تبلت) ---------- */
@media (max-width: 992px) {

   /* اسکلت */
   .layout {
      flex-direction: column;
      padding: 14px;
   }

   .sidebar {
      display: none;
   }

   .menu-toggle {
      display: grid;
   }

   .nav .sub-menu {
      display: none !important;
   }

   .blog-grid,
   .product-single,
   .single-grid {
      grid-template-columns: 1fr;
   }

   .side-col,
   .buy-box {
      position: static;
   }

   /* اسلایدر قدیمی / Swiper */
   .hero-slide {
      aspect-ratio: 16/7;
   }

   .slide {
      flex-direction: column;
      text-align: center;
      padding: 30px 20px 40px;
      gap: 16px;
   }

   .slide-content {
      order: 2;
   }

   .slide-media {
      order: 1;
      width: 100%;
      max-width: 300px;
      margin: 0 auto 10px;
   }

   .slide h2 {
      font-size: 22px;
   }

   .slide p {
      max-width: 100%;
      margin-inline: auto;
      font-size: 12px;
   }

   .slide-actions {
      justify-content: center;
   }

   .slider-arrow {
      width: 32px;
      height: 32px;
   }

   .slider-arrow svg {
      width: 14px;
      height: 14px;
   }

   /* هیرو */
   .hero {
      padding: 32px 24px 96px;
   }

   .hero-icon {
      width: 100px;
      height: 100px;
      opacity: .45;
      top: 38%;
   }

   /* سربرگ‌ها و آمار */
   .head-top {
      flex-direction: column;
      text-align: center;
   }

   .head-info .rating {
      justify-content: center;
   }

   .stat-boxes {
      grid-template-columns: repeat(2, 1fr);
   }

   .features-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   /* گریدها */
   .plugin-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
   }

   .grid-3 {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
   }

   .post-card.--featured {
      grid-column: span 2;
      flex-direction: row;
   }

   /* داشبورد دانلود */
   .dl-dash {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .dl-dash-card {
      padding: 18px;
   }

   /* رکوردارها */
   .top-dl-grid {
      grid-template-columns: 1fr 1fr;
      gap: 18px;
   }

   /* محصول */
   .product-card .product-thumb {
      height: 140px;
   }
}

/* ---------- ≤ 768px (موبایل بزرگ) ---------- */
@media (max-width: 768px) {
   .layout {
      padding: 10px;
   }

   .main {
      padding: 0;
   }

   .plugin-grid,
   .grid-4,
   .grid-3 {
      grid-template-columns: repeat(2, 1fr);
   }

   .grid-3 {
      gap: 14px;
   }

   /* تاپ‌بار */
   .topbar {
      flex-direction: column;
      align-items: stretch;
   }

   .topbar-actions {
      justify-content: center;
   }

   .topbar .ajax-search-form,
   .topbar .search-box {
      flex-basis: 100%;
      width: 100%;
   }

   /* هیرو و اسلایدر */
   .hero {
      padding: 24px 16px 80px;
      border-radius: var(--r-lg);
   }

   .hero h1 {
      font-size: 20px;
   }

   .hero p {
      font-size: 11.5px;
   }

   .hero-icon {
      width: 80px;
      height: 80px;
      opacity: .3;
      top: 30%;
   }

   .hero-icon svg {
      width: 50px;
      height: 50px;
   }

   .hero-search {
      bottom: 10px;
      inset-inline: 16px;
      width: auto;
   }

   .slider {
      border-radius: var(--r-lg);
      margin-bottom: 16px;
   }

   .hero-slide {
      aspect-ratio: 16/9;
   }

   .hero-slider-arrow {
      opacity: 1;
      visibility: visible;
      width: 36px;
      height: 36px;
   }

   /* مطالب */
   .post-card.--featured {
      grid-column: span 1;
      flex-direction: column;
   }

   .post-card.--featured .post-thumb {
      flex: none;
      height: 160px;
      width: 100%;
   }

   .post-title {
      font-size: 13px;
   }

   .post-meta {
      font-size: 11px;
      gap: 8px;
   }

   .post-body {
      padding: 14px;
   }

   .post-nav {
      grid-template-columns: 1fr;
   }

   .form-grid {
      grid-template-columns: 1fr;
   }

   /* سربرگ بخش‌ها */
   .sec-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      margin: 24px 0 14px;
   }

   .sec-title {
      font-size: 17px;
      padding-inline-start: 10px;
   }

   .sec-title::before {
      width: 3px;
   }

   .sec-desc {
      font-size: 11px;
   }

   .sec-link {
      font-size: 11.5px;
   }

   /* رکوردارها */
   .top-dl-grid {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .top-dl {
      padding: 18px 14px;
   }

   .top-dl-head {
      font-size: 12px;
   }

   .top-dl-item {
      padding: 8px;
      gap: 8px;
   }

   .top-dl-thumb {
      width: 34px;
      height: 34px;
   }

   .top-dl-title {
      font-size: 11px;
   }

   .top-dl-count {
      font-size: 9.5px;
   }

   /* محصول و گالری */
   .product-card .product-thumb {
      height: 160px;
   }

   .thumbs {
      grid-template-columns: repeat(4, 1fr);
   }

   /* امتیازدهی و پیش‌نمایش */
   .icodito-rating-container {
      padding: 18px;
   }

   .icodito-rating-container .star {
      width: 42px;
      height: 42px;
   }

   .icodito-rating-container .star svg {
      width: 22px;
      height: 22px;
   }

   .icodito-rating-container .rating-result {
      margin-inline-start: 0;
      margin-top: 12px;
      width: 100%;
      justify-content: center;
   }

}

/* ---------- ≤ 480px (موبایل کوچک) ---------- */
@media (max-width: 480px) {

   /* گریدها */
   .plugin-grid,
   .grid-2,
   .grid-3,
   .grid-4 {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .post-card.--featured {
      grid-column: span 1;
   }

   .post-thumb {
      height: 140px;
   }

   .post-card.--featured .post-thumb {
      height: 160px;
   }

   .footer-grid {
      grid-template-columns: 1fr;
   }

   .err-num {
      font-size: 84px;
   }

   .features-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .author-box {
      flex-direction: column;
      text-align: center;
   }

   .comment-list .children,
   .icd-comments .comment-list .children {
      margin-inline-start: 20px;
   }

   .head-icon {
      width: 72px;
      height: 72px;
   }

   /* هیرو و اسلایدر */
   .hero {
      padding: 20px 12px 70px;
   }

   .hero-icon {
      width: 60px;
      height: 60px;
   }

   .hero-icon svg {
      width: 36px;
      height: 36px;
   }

   .hero-slide {
      aspect-ratio: 4/3;
   }

   .slide {
      padding: 20px 14px 30px;
   }

   .slide h2 {
      font-size: 18px;
   }

   .slide-badge {
      font-size: 10px;
      padding: 2px 12px;
   }

   .slide-actions .btn {
      font-size: 12px;
      padding: 8px 14px;
   }

   .slider-arrow {
      display: none;
   }

   .slider-dots {
      bottom: 8px;
   }

   /* داشبورد دانلود */
   .dl-dash-card {
      padding: 18px;
   }

   .dl-dash-head {
      flex-wrap: wrap;
      gap: 10px;
   }

   .dl-logo {
      width: 48px;
      height: 48px;
   }

   .dl-logo svg {
      width: 24px;
      height: 24px;
   }

   .dl-dash-title {
      font-size: 14px;
   }

   .dl-dash-sub {
      font-size: 10px;
   }

   .dl-file {
      flex-direction: column;
      align-items: flex-start;
      font-size: 11px;
   }

   .req-grid {
      grid-template-columns: 1fr 1fr;
      gap: 6px;
   }

   .req-item {
      padding: 6px 4px;
      font-size: 9px;
   }

   .req-item b {
      font-size: 10px;
   }

   /* کارت‌ها */
   .plugin-card,
   .font-card {
      padding: 16px 12px;
   }

   .plugin-icon {
      width: 80px;
      height: 80px;
   }

   .plugin-icon svg {
      width: 28px;
      height: 28px;
   }

   .plugin-title {
      font-size: 13px;
   }

   .sw-meta {
      font-size: 9px;
   }

   .font-preview {
      font-size: 32px;
   }

   .font-name {
      font-size: 12px;
   }

   /* المان‌های کوچک */
   .btn-lg {
      padding: 10px 18px;
      font-size: 12px;
   }

   .btn-sm {
      padding: 6px 12px;
      font-size: 11px;
   }

   .badge {
      font-size: 9px;
      padding: 2px 8px;
   }
}