/*=============================================
   DANGO WEB - Modern Design System
   Version: 3.0.0 | Pure CSS | No UIkit
   =============================================*/

/*---------------------------------------------
   1. FONT FACES
   ---------------------------------------------*/
@font-face { font-family: "FontR"; src: url("../fonts/Estedad-FD-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "FontB"; src: url("../fonts/Estedad-FD-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "FontEB"; src: url("../fonts/Estedad-FD-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "FontBlack"; src: url("../fonts/Estedad-FD-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/*---------------------------------------------
   2. DESIGN TOKENS
   ---------------------------------------------*/
:root {
  --color-primary: #1471e7; --color-primary-rgb: 20,113,231;
  --color-primary-dark: #0d5bbd; --color-primary-light: #3b8af0;
  --color-secondary: #10b981; --color-secondary-rgb: 16,185,129;
  --color-orange: #f88300; --color-red: #e74c3c;
  --color-purple: #a535b9; --color-teal: #38ada9;
  --color-white: #fff; --color-off-white: #f8fafc; --color-light-gray: #f1f5f9;
  --color-gray: #94a3b8; --color-dark-gray: #64748b; --color-text: #475569;
  --color-heading: #1e293b; --color-dark: #0f172a;
  --glass-bg: rgba(255,255,255,0.85); --glass-blur: 20px;
  --font-primary: "FontR",Tahoma,Arial,sans-serif; --font-bold: "FontB",Tahoma,Arial,sans-serif;
  --font-extrabold: "FontEB",Tahoma,Arial,sans-serif; --font-black: "FontBlack",Tahoma,Arial,sans-serif;
  --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem;
  --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.08);
  --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease;
  --z-base: 1; --z-dropdown: 50; --z-sticky: 100; --z-overlay: 200; --z-preloader: 9999;
  --container-max: 1280px; --container-padding: 1.5rem;
}

/*---------------------------------------------
   3. RESET & BASE
   ---------------------------------------------*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-primary);font-size:14px;line-height:1.8;color:var(--color-text);background:var(--color-white);overflow-x:hidden;direction:rtl;text-align:right;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit;transition:color var(--transition-fast)}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-bold);line-height:1.4;color:var(--color-heading)}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}h2{font-size:clamp(1.5rem,3vw,2rem)}h3{font-size:clamp(1.25rem,2vw,1.5rem)}
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding)}
.text-center{text-align:center}
body.no-scroll{overflow:hidden}

/*---------------------------------------------
   4. PRELOADER
   ---------------------------------------------*/
.preloader{position:fixed;inset:0;z-index:var(--z-preloader);display:flex;align-items:center;justify-content:center;background:var(--color-white);transition:opacity .5s ease,visibility .5s ease}
.preloader.loaded{opacity:0;visibility:hidden}
.preloader-spinner{width:44px;height:44px;border:4px solid var(--color-light-gray);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/*---------------------------------------------
   5. HEADER & NAVIGATION
   ---------------------------------------------*/
.site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-sticky);padding-block:var(--space-md);transition:all var(--transition-base);background:transparent;border-bottom:1px solid transparent}
.site-header.scrolled{background:var(--glass-bg)!important;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid rgba(0,0,0,0.06);box-shadow:0 4px 30px rgba(0,0,0,0.04);padding-block:var(--space-sm)}
.header-inner{display: flex; align-items: center; justify-content: space-between;}
.brand-logo{display:flex;align-items:center;flex-shrink:0}
.brand-logo img,.dw-logo-svg{height:42px;width:auto;transition:height var(--transition-base)}
.site-header.scrolled .brand-logo img,.site-header.scrolled .dw-logo-svg{height:36px}

/* Desktop Nav */
.desktop-nav{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-sm)}
.nav-menu{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;font-weight:600;font-size:.9rem;color:var(--color-heading);border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap;cursor:pointer}
.nav-link:hover,.nav-link.active{color:var(--color-primary);background:rgba(var(--color-primary-rgb),0.04)}
.menu-icon{display:flex;align-items:center;flex-shrink:0}
.menu-icon img,.menu-icon svg{width:20px;height:20px;object-fit:contain}
.menu-arrow{display:inline-flex;align-items:center;transition:transform var(--transition-fast);flex-shrink:0}
.nav-item:hover>.nav-link .menu-arrow{transform:rotate(180deg)}

/* Nav Icons */
.nav-search-toggle,.nav-icon-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-heading);transition:all var(--transition-fast)}
.nav-search-toggle:hover,.nav-icon-link:hover{background:rgba(var(--color-primary-rgb),0.06);color:var(--color-primary)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:var(--space-sm);z-index:1000}
.hamburger span{width:26px;height:2.5px;background:var(--color-heading);border-radius:var(--radius-full);transition:all var(--transition-base)}
.hamburger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Search Overlay */
.search-overlay{position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,0.98);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);padding:var(--space-xl);opacity:0;visibility:hidden;transition:all var(--transition-base);z-index:-1;border-bottom:1px solid rgba(0,0,0,0.05);box-shadow:0 10px 40px rgba(0,0,0,0.05)}
.search-overlay.active{opacity:1;visibility:visible;z-index:var(--z-overlay)}
.search-overlay-form{display:flex;align-items:center;gap:var(--space-md);max-width:600px;margin-inline:auto}
.search-overlay-input{flex:1;padding:var(--space-md) var(--space-lg);border:2px solid var(--color-light-gray);border-radius:var(--radius-full);font-family:inherit;font-size:1rem;outline:none}
.search-overlay-input:focus{border-color:var(--color-primary)}
.search-overlay-close{flex-shrink:0;color:var(--color-dark-gray);padding:var(--space-sm)}

/* =============================================
   MEGA MENU & SUBMENU
   ============================================= */
/* Regular Submenu */
.submenu{position:absolute;top:100%;right:0;min-width:220px;background:rgba(255,255,255,0.98);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.06);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--transition-base);z-index:var(--z-dropdown);padding:var(--space-sm) 0}
.nav-item:hover>.submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu .submenu{top:-8px;right:100%}
.submenu-inner{padding:0}
.submenu-list{list-style:none;padding:0;margin:0}
.sub-item{display:block}
.sub-link{display:flex;align-items:center;gap:8px;padding:10px 20px;font-size:.85rem;font-weight:500;color:var(--color-text);transition:all var(--transition-fast)}
.sub-link:hover{color:var(--color-primary);background:rgba(var(--color-primary-rgb),0.04);padding-right:24px}

/* Mega Submenu */
.mega-submenu {
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    width: 800px;
    max-width: 90vw;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: var(--radius-2xl);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: none;
    z-index: var(--z-dropdown);
    padding: var(--space-xl);
}

.mega-menu-item:hover > .mega-submenu {
    display: block;
    animation: megaFadeIn 0.3s ease;
}

.mega-submenu:hover {
    display: block !important;
}

@keyframes megaFadeIn {
    from {
        opacity: 0;
        transform: translateX(50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(50%) translateY(0);
    }
}
.mega-submenu .submenu-inner { display: flex !important; flex-direction: row !important; gap: var(--space-xl); flex-wrap: nowrap; } 
.mega-submenu .submenu-list { flex: 1; min-width: 180px; }

.mega-submenu > .submenu-inner > .submenu-list {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--space-xl);
}

.mega-submenu > .submenu-inner > .submenu-list > .sub-item {
    flex: 1;
    min-width: 160px;
}

.mega-submenu .submenu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.mega-submenu .has-submenu > .sub-link {
    pointer-events: none;
    font-weight: 700;
    border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.12);
    margin-bottom: 6px;
}

.mega-submenu .has-submenu > .sub-link .menu-arrow {
    display: none;
}

/* Always show sub-items inside mega menu */
.mega-submenu .submenu{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;box-shadow:none!important;border:none!important;border-radius:0!important;padding:0!important;background:transparent!important;min-width:auto!important}
.mega-submenu .has-submenu>.sub-link{pointer-events:none;font-weight:700;font-size:.95rem;color:var(--color-heading);margin-bottom:6px;padding-bottom:8px;border-bottom:2px solid rgba(var(--color-primary-rgb),0.12);border-radius:0;padding-right:5px}
.mega-submenu .has-submenu>.sub-link .menu-arrow{display:none}
.mega-submenu .submenu .sub-link{font-weight:400;font-size:.85rem;padding:6px 8px;border-bottom:none;pointer-events:auto;color:var(--color-text)}
.mega-submenu .submenu .sub-link:hover{color:var(--color-primary);background:rgba(var(--color-primary-rgb),0.04);padding-right:12px;border-radius:var(--radius-sm)}
.mega-menu-banner{flex:0 0 250px;border-radius:var(--radius-xl);overflow:hidden}
.mega-menu-banner img{width:100%;height:100%;object-fit:cover}

/* =============================================
   MOBILE NAVIGATION
   ============================================= */
@media(max-width:991px){
  .hamburger{display:flex;}
  
  .desktop-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--transition-base);
    overflow-y: auto;
    padding: 100px 0 40px;
  }
  .desktop-nav.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  .nav-menu {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }
  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 16px 24px;
    font-size: 1rem;
    border-radius: 0;
  }

  .submenu,
  .mega-submenu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: rgba(var(--color-primary-rgb), 0.02) !important;
    display: none;
    padding: 0 !important;
    margin: 0 !important;
  }

  .nav-item.active > .submenu,
  .nav-item.active > .mega-submenu,
  .sub-item.active > .submenu {
    display: block !important;
  }

  .mega-submenu > .submenu-inner {
    flex-direction: column !important;
    gap: 0 !important;
    padding: var(--space-sm) 0;
  }
  .mega-submenu > .submenu-inner > .submenu-list {
    flex: none !important;
    min-width: auto !important;
    display: block !important;
    padding: 0 !important;
  }
  .mega-submenu > .submenu-inner > .submenu-list > .sub-item {
    border-bottom: 1px solid rgba(0,0,0,0.03);
  }

  .mega-submenu > .submenu-inner > .submenu-list > .sub-item > .sub-link {
    pointer-events: auto !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    justify-content: space-between !important;
    cursor: pointer !important;
  }
  
  .mega-submenu .has-submenu > .sub-link .menu-arrow {
    display: flex !important;
  }
  
  .sub-item.active > .sub-link .menu-arrow {
    transform: rotate(180deg);
  }

  .mega-submenu .submenu {
    padding-right: var(--space-md) !important;
    background: transparent !important;
  }
  
  .sub-link {
    padding: 12px 32px;
    font-size: 0.95rem;
  }
  .mega-submenu .submenu .sub-link {
    padding: 10px 48px;
    font-size: 0.9rem;
  }

  .mega-menu-banner {
    display: none;
  }
}

/* Inner pages offset */
.single-post,.page-wrapper,.page-full-wrapper,.pricing-page,.archive-page,.search-page,.error-page,.portfolio-single,.archive-portfolio-page,.shop-page,.product-single-page{padding-top:90px}
@media(max-width:768px){.single-post,.page-wrapper,.page-full-wrapper,.pricing-page,.archive-page,.search-page,.error-page,.portfolio-single,.archive-portfolio-page,.shop-page,.product-single-page{padding-top:75px}}

/*---------------------------------------------
   BUTTONS (Global)
   ---------------------------------------------*/
.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:.75rem 1.75rem;font-weight:600;font-size:.9rem;border-radius:var(--radius-full);transition:all var(--transition-base);white-space:nowrap}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 4px 15px rgba(var(--color-primary-rgb),0.3)}
.btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 8px 25px rgba(var(--color-primary-rgb),0.4);color:#fff}
.btn-outline{background:transparent;color:var(--color-primary);border:2px solid rgba(var(--color-primary-rgb),0.2)}
.btn-outline:hover{background:rgba(var(--color-primary-rgb),0.05);border-color:var(--color-primary);transform:translateY(-2px)}
.btn-arrow{display:inline-flex;transition:transform var(--transition-base)}
.btn-arrow svg{width:18px;height:18px}
.btn:hover .btn-arrow{transform:translateX(-4px)}

/*---------------------------------------------
   BACK TO TOP
   ---------------------------------------------*/
.back-to-top{position:fixed;bottom:2rem;left:2rem;z-index:var(--z-sticky);width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(var(--color-primary-rgb),0.3);opacity:0;visibility:hidden;transform:translateY(20px);transition:all var(--transition-base)}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--color-primary-dark);transform:translateY(-4px)}

/*---------------------------------------------
   SCROLL REVEAL
   ---------------------------------------------*/
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.15s}.reveal-delay-2{transition-delay:.3s}

/*---------------------------------------------
   BREADCRUMBS
   ---------------------------------------------*/
.dw-breadcrumbs{padding-block:var(--space-lg);font-size:.85rem;color:var(--color-gray)}
.dw-breadcrumbs a{color:var(--color-gray);transition:color var(--transition-fast)}
.dw-breadcrumbs a:hover{color:var(--color-primary)}
.dw-breadcrumb-sep{margin-inline:var(--space-xs);color:var(--color-gray)}
.dw-breadcrumb-current{color:var(--color-heading);font-weight:600}

/*---------------------------------------------
   EMPTY STATE (Shared)
   ---------------------------------------------*/
.empty-state{text-align:center;padding:var(--space-3xl) var(--space-xl)}
.empty-state svg{color:var(--color-gray);margin-bottom:var(--space-lg)}
.empty-state h2{font-family:var(--font-bold);font-size:1.5rem;color:var(--color-heading);margin-bottom:var(--space-sm)}
.empty-state p{color:var(--color-dark-gray);margin-bottom:var(--space-xl);line-height:2}

/*---------------------------------------------
   PAGINATION (Shared)
   ---------------------------------------------*/
.pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-md)}
.pagination-numbers{display:flex;gap:var(--space-xs)}
.pagination-number{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);font-weight:600;font-size:.9rem;color:var(--color-heading);transition:all var(--transition-fast)}
.pagination-number:hover{background:rgba(var(--color-primary-rgb),0.06);color:var(--color-primary)}
.pagination-number.active{background:var(--color-primary);color:#fff}
.pagination-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);color:var(--color-heading);transition:all var(--transition-fast)}
.pagination-btn:hover{background:rgba(var(--color-primary-rgb),0.06);color:var(--color-primary)}

/*---------------------------------------------
   CONTENT STYLES (Shared: tables, code, blockquote)
   ---------------------------------------------*/
.dw-content,.page-content,.page-full-body,.single-post-content,.product-tab-body{font-size:1rem;line-height:2.1;color:var(--color-text);text-align:justify}
.dw-content h1,.dw-content h2,.dw-content h3,.dw-content h4,.page-content h1,.page-content h2,.page-content h3,.page-content h4,.page-full-body h1,.page-full-body h2,.page-full-body h3,.page-full-body h4,.single-post-content h1,.single-post-content h2,.single-post-content h3,.single-post-content h4{margin-top:var(--space-xl);margin-bottom:var(--space-md);color:var(--color-heading);font-family:var(--font-bold)}
.dw-content h2,.page-content h2,.single-post-content h2{font-size:1.5rem}
.page-full-body h2{font-size:1.6rem}
.dw-content h3,.page-content h3,.single-post-content h3{font-size:1.25rem}
.page-full-body h3{font-size:1.35rem}
.dw-content p,.page-content p,.page-full-body p,.single-post-content p{margin-bottom:var(--space-md)}
.dw-content a,.page-content a,.page-full-body a,.single-post-content a{color:var(--color-primary);text-decoration:underline}
.dw-content img,.page-content img,.page-full-body img,.single-post-content img{max-width:100%;height:auto;border-radius:var(--radius-lg);margin-block:var(--space-lg)}
.dw-content ul,.dw-content ol,.page-content ul,.page-content ol,.page-full-body ul,.page-full-body ol,.single-post-content ul,.single-post-content ol{margin-bottom:var(--space-md);padding-right:var(--space-xl)}
.dw-content ul,.page-content ul,.page-full-body ul,.single-post-content ul{list-style:disc}
.dw-content ol,.page-content ol,.page-full-body ol,.single-post-content ol{list-style:decimal}
.dw-content li,.page-content li,.single-post-content li{margin-bottom:var(--space-xs)}
.page-full-body li{margin-bottom:var(--space-sm);line-height:2.1}
.dw-content li::marker,.page-content li::marker,.page-full-body li::marker,.single-post-content li::marker{color:var(--color-primary)}
.dw-content blockquote,.page-content blockquote,.single-post-content blockquote{background:rgba(var(--color-primary-rgb),0.04);color:var(--color-primary);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);border-right:4px solid var(--color-primary);margin:var(--space-lg) 0;font-style:normal}
.page-full-body blockquote{background:linear-gradient(135deg,rgba(var(--color-primary-rgb),0.03) 0%,rgba(var(--color-primary-rgb),0.06) 100%);padding:var(--space-xl);border-radius:var(--radius-xl);font-size:1.05rem}
.dw-content pre,.page-content pre,.page-full-body pre,.single-post-content pre{background:#1e293b;color:#e2e8f0;padding:var(--space-lg);border-radius:var(--radius-lg);overflow-x:auto;direction:ltr;text-align:left;margin-bottom:var(--space-lg);font-size:.9rem;line-height:1.7}
.dw-content code,.page-content code,.page-full-body code,.single-post-content code{background:rgba(var(--color-primary-rgb),0.06);padding:2px 6px;border-radius:4px;font-size:.85em;direction:ltr;display:inline-block}
.dw-content pre code,.page-content pre code,.page-full-body pre code,.single-post-content pre code{background:none;padding:0;font-size:inherit}

/* Tables */
.dw-content table,.page-content table,.page-full-body table,.single-post-content table,.product-tab-body table{width:100%;border-collapse:separate;border-spacing:0;margin:var(--space-xl) 0;font-size:.9rem;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 0 0 1px rgba(var(--color-primary-rgb),0.08);border:1px solid rgba(var(--color-primary-rgb),0.1)}
.dw-content thead th,.page-content thead th,.page-full-body thead th,.single-post-content thead th,.product-tab-body thead th{background:linear-gradient(135deg,rgba(var(--color-primary-rgb),0.06) 0%,rgba(var(--color-primary-rgb),0.03) 100%);color:var(--color-heading);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:0.5px;padding:var(--space-md) var(--space-lg);text-align:right;border-bottom:2px solid rgba(var(--color-primary-rgb),0.15);border-left:1px solid rgba(var(--color-primary-rgb),0.06);white-space:nowrap}
.dw-content thead th:last-child,.page-content thead th:last-child,.page-full-body thead th:last-child,.single-post-content thead th:last-child,.product-tab-body thead th:last-child{border-left:none}
.dw-content tbody td,.page-content tbody td,.page-full-body tbody td,.single-post-content tbody td,.product-tab-body tbody td{padding:var(--space-md) var(--space-lg);text-align:right;color:var(--color-text);border-bottom:1px solid rgba(var(--color-primary-rgb),0.06);border-left:1px solid rgba(var(--color-primary-rgb),0.04);transition:all var(--transition-fast);vertical-align:middle}
.dw-content tbody td:last-child,.page-content tbody td:last-child,.page-full-body tbody td:last-child,.single-post-content tbody td:last-child,.product-tab-body tbody td:last-child{border-left:none}
.dw-content tbody tr:hover td,.page-content tbody tr:hover td,.page-full-body tbody tr:hover td,.single-post-content tbody tr:hover td,.product-tab-body tbody tr:hover td{background:rgba(var(--color-primary-rgb),0.025)}
.dw-content tbody tr:last-child td,.page-content tbody tr:last-child td,.page-full-body tbody tr:last-child td,.single-post-content tbody tr:last-child td,.product-tab-body tbody tr:last-child td{border-bottom:none}
.dw-content tbody td:first-child,.page-content tbody td:first-child,.page-full-body tbody td:first-child,.single-post-content tbody td:first-child,.product-tab-body tbody td:first-child{font-weight:600;color:var(--color-heading)}
.dw-content tbody tr:nth-child(even) td,.page-content tbody tr:nth-child(even) td,.page-full-body tbody tr:nth-child(even) td,.single-post-content tbody tr:nth-child(even) td,.product-tab-body tbody tr:nth-child(even) td{background:rgba(var(--color-primary-rgb),0.015)}
@media(max-width:768px){.dw-content table,.page-content table,.page-full-body table,.single-post-content table,.product-tab-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;border-radius:var(--radius-lg)}}

/* ===== WordPress Table Block Override ===== */
.wp-block-table table{border:1px solid rgba(var(--color-primary-rgb),0.1)!important;border-radius:var(--radius-xl)!important}
.wp-block-table td,.wp-block-table th{border:none!important;padding:var(--space-md) var(--space-lg)!important}

/*---------------------------------------------
   HOMEPAGE HERO
   ---------------------------------------------*/
.hero-homepage{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;padding-block:var(--space-5xl);isolation:isolate}
.hero-bg-shape{position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(var(--color-primary-rgb),0.03) 0%,rgba(var(--color-primary-rgb),0.06) 50%,rgba(var(--color-primary-rgb),0.03) 100%)}
.hero-floating{position:absolute;border-radius:50%;opacity:0.04;pointer-events:none;z-index:0}
.hero-floating-1{width:500px;height:500px;background:var(--color-primary);top:-250px;left:-150px;animation:float-slow 20s ease-in-out infinite}
.hero-floating-2{width:300px;height:300px;background:var(--color-secondary);bottom:-100px;right:-100px;animation:float-slow 15s ease-in-out infinite reverse}
.hero-floating-3{width:200px;height:200px;background:var(--color-orange);top:40%;right:10%;animation:float-slow 18s ease-in-out infinite 5s}
@keyframes float-slow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.1)}}
.hero-homepage-content{text-align:center;max-width:750px;margin-inline:auto;position:relative;z-index:var(--z-base);padding-top:var(--space-3xl)}
.hero-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:rgba(var(--color-primary-rgb),0.08);border:1px solid rgba(var(--color-primary-rgb),0.12);border-radius:var(--radius-full);font-size:.8rem;font-weight:600;color:var(--color-primary);margin-bottom:var(--space-lg)}
.hero-badge-dot{width:8px;height:8px;background:var(--color-primary);border-radius:50%;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(var(--color-primary-rgb),0.4)}50%{box-shadow:0 0 0 8px rgba(var(--color-primary-rgb),0)}}
.hero-title{font-size:clamp(1.75rem,5vw,2.5rem);font-weight:800;line-height:1.3;margin-bottom:var(--space-lg)}
.hero-title-highlight{color:var(--color-primary);position:relative}
.hero-title-highlight::after{content:"";position:absolute;bottom:2px;left:0;width:100%;height:6px;background:rgba(var(--color-primary-rgb),0.15);border-radius:var(--radius-full);z-index:-1}
.hero-description{font-size:1rem;color:var(--color-dark-gray);line-height:2.1;margin-bottom:var(--space-xl)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.justify-center{justify-content:center}
@media(max-width:480px){.hero-actions{flex-direction:column}.hero-actions .btn{width:100%;justify-content:center}}

/*---------------------------------------------
   PRODUCTS CAROUSEL
   ---------------------------------------------*/
.products-section{padding-block:var(--space-5xl);background:var(--color-off-white)}
.section-header{text-align:center;max-width:650px;margin-inline:auto;margin-bottom:var(--space-3xl)}
.section-label{display:inline-block;font-size:.8rem;font-weight:700;color:var(--color-primary);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--space-md);padding:var(--space-xs) var(--space-lg);background:rgba(var(--color-primary-rgb),0.06);border-radius:var(--radius-full)}
.section-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:var(--space-sm)}
.section-description{color:var(--color-dark-gray);line-height:2}
.products-carousel{position:relative;overflow:hidden}
.products-track{transform: translateX(0);display:flex;gap:var(--space-lg);transition:transform .5s ease}
.product-card{flex:0 0 220px;background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(0,0,0,0.04);transition:all var(--transition-base)}
.product-card:hover{transform:translateY(-6px);box-shadow:0 15px 40px rgba(0,0,0,0.08)}
.product-card-visual{position:relative;padding:var(--space-xl);display:flex;align-items:center;justify-content:center;min-height:200px;background:linear-gradient(135deg,rgba(var(--color-primary-rgb),0.02) 0%,rgba(var(--color-primary-rgb),0.06) 100%)}
.product-card-glow{position:absolute;width:120px;height:120px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(var(--color-primary-rgb),0.1) 0%,transparent 70%);border-radius:50%;filter:blur(20px);transition:all var(--transition-base)}
.product-card:hover .product-card-glow{width:150px;height:150px}
.product-card-visual img{max-height:140px;width:auto;position:relative;z-index:var(--z-base)}
.product-badge{position:absolute;top:var(--space-sm);right:var(--space-sm);z-index:calc(var(--z-base) + 1);padding:.25rem .75rem;border-radius:var(--radius-full);font-size:.7rem;font-weight:700;color:#fff}
.badge-pro{background:#f1c40f;color:#1a202c}.badge-free{background:#27ae60}.badge-soon{background:#9b59b6}
.product-card-info{padding:var(--space-md);text-align:center}
.product-card-name{font-size:1rem;font-weight:700;margin-bottom:2px}
.product-card-subtitle{font-size:.75rem;color:var(--color-dark-gray)}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:var(--z-dropdown);width:44px;height:44px;border-radius:50%;background:var(--color-white);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;color:var(--color-heading);transition:all var(--transition-base)}
.carousel-btn:hover{background:var(--color-primary);color:#fff}
.carousel-prev { right: -10px; left: auto; }
.carousel-next { left: -10px; right: auto; }
.carousel-dots{display:flex;justify-content:center;gap:var(--space-sm);margin-top:var(--space-xl)}
.carousel-dot{width:10px;height:10px;border-radius:50%;background:var(--color-gray);cursor:pointer;transition:all var(--transition-fast)}
.carousel-dot.active{background:var(--color-primary);width:28px;border-radius:var(--radius-full)}
@media(max-width:768px){.product-card{flex:0 0 180px}}

/*---------------------------------------------
   ARTICLES & SERVICES
   ---------------------------------------------*/
.articles-section,.services-section{padding-block:var(--space-5xl)}
.services-section{background:var(--color-off-white)}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-xl)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--space-xl)}
.article-card,.service-card{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(0,0,0,0.04);transition:all var(--transition-base)}
.article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.service-card{padding:var(--space-2xl)}.service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.article-card-image img{width:100%;height:200px;object-fit:cover}
.article-card-placeholder{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:var(--color-light-gray);color:var(--color-gray)}
.article-card-body{padding:var(--space-lg)}
.article-card-title{font-size:1rem;font-weight:700;margin-bottom:var(--space-xs);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-card-excerpt{font-size:.8rem;color:var(--color-dark-gray);margin-bottom:var(--space-sm);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-card-date{font-size:.7rem;color:var(--color-gray)}
.service-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:rgba(var(--color-primary-rgb),0.06);color:var(--color-primary);margin-bottom:var(--space-lg)}
.service-card h3{font-size:1.1rem;margin-bottom:var(--space-sm)}
.service-card p{color:var(--color-dark-gray);margin-bottom:var(--space-lg);line-height:2}
@media(max-width:768px){.services-grid,.articles-grid{grid-template-columns:1fr}}

/*---------------------------------------------
   FOOTER
   ---------------------------------------------*/
.site-footer{background:#fafbfc;border-top:1px solid #edf2f7;padding-block:var(--space-3xl)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-2xl)}
.footer-logo{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}
.footer-logo svg{height:40px}
.footer-badge{background:#1a202c;color:#fff;font-size:.6rem;font-weight:600;padding:4px 10px;border-radius:var(--radius-full);letter-spacing:1px}
.footer-about{color:var(--color-dark-gray);line-height:2;font-size:.875rem;max-width:400px;margin-bottom:var(--space-lg)}
.footer-phone{font-size:1.5rem;font-weight:700;color:#1a202c;direction:ltr;display:inline-block;margin-bottom:var(--space-sm)}
.footer-social{display:block;color:var(--color-gray);transition:color var(--transition-fast)}
.footer-social:hover{color:#1a202c}
.footer-col-title{font-size:.75rem;font-weight:700;letter-spacing:1px;color:#a0aec0;margin-bottom:var(--space-lg);text-transform:uppercase}
.footer-col ul li{margin-bottom:var(--space-md)}
.footer-col ul li a{color:#2d3748;font-size:.9rem;font-weight:500;transition:color var(--transition-fast)}
.footer-col ul li a:hover{color:var(--color-primary);padding-right:4px}
.footer-bottom{border-top:1px solid #edf2f7;margin-top:var(--space-2xl);padding-top:var(--space-xl);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-md)}
.footer-bottom p{color:var(--color-gray);font-size:.8rem}
.footer-copyright{color:#a0aec0;font-size:.7rem}
@media(max-width:991px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;text-align:center}}

/*=============================================
   SINGLE POST
   =============================================*/
.single-post-grid{display:grid;grid-template-columns:1fr 300px;gap:var(--space-2xl);align-items:start}
.single-post-main{min-width:0}
.single-post-header{margin-bottom:var(--space-xl)}
.single-post-title{font-family:var(--font-extrabold);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.5;margin-bottom:var(--space-md)}
.single-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lg);font-size:.8rem;color:var(--color-dark-gray)}
.single-post-meta span{display:inline-flex;align-items:center;gap:6px}
.single-post-meta svg{flex-shrink:0}
.single-post-category a{color:var(--color-primary);font-weight:600}
.single-post-thumbnail{margin-bottom:var(--space-xl);border-radius:var(--radius-xl);overflow:hidden}
.single-post-img{width:100%;height:auto;border-radius:var(--radius-xl)}
.single-post-tags{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;padding:var(--space-lg) 0;border-top:1px solid var(--color-light-gray);border-bottom:1px solid var(--color-light-gray);margin-bottom:var(--space-2xl)}
.tags-label{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.85rem;color:var(--color-heading);white-space:nowrap}
.tags-list{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.tag-item{display:inline-block;padding:.35rem .9rem;background:rgba(var(--color-primary-rgb),0.06);color:var(--color-primary);border-radius:var(--radius-full);font-size:.8rem;font-weight:500;transition:all var(--transition-fast)}
.tag-item:hover{background:var(--color-primary);color:#fff}
.single-post-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:var(--space-lg)}
.sidebar-banner{display:block;border-radius:var(--radius-xl);overflow:hidden;transition:transform var(--transition-base)}
.sidebar-banner:hover{transform:scale(1.02)}
.sidebar-banner img{width:100%;height:auto}
@media(max-width:991px){.single-post-grid{grid-template-columns:1fr}.single-post-sidebar{position:static;order:-1}}
@media(max-width:480px){.single-post-meta{gap:var(--space-sm)}}

/*=============================================
   PAGE
   =============================================*/
.page-grid{display:grid;grid-template-columns:1fr 300px;gap:var(--space-2xl);align-items:start}
.page-main{min-width:0;background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-2xl);border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-sm)}
.page-thumbnail{margin:calc(-1 * var(--space-2xl));margin-bottom:var(--space-xl);border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden}
.page-img{width:100%;height:auto;display:block}
.page-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:2px solid rgba(var(--color-primary-rgb),0.08)}
.page-title{font-family:var(--font-extrabold);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.5}
.page-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:var(--space-lg)}
@media(max-width:991px){.page-grid{grid-template-columns:1fr}.page-sidebar{position:static;order:-1}.page-main{padding:var(--space-xl)}.page-thumbnail{margin:calc(-1 * var(--space-xl));margin-bottom:var(--space-lg)}}
@media(max-width:480px){.page-main{padding:var(--space-md)}.page-thumbnail{margin:calc(-1 * var(--space-md));margin-bottom:var(--space-md)}}

/*=============================================
   PAGE FULL
   =============================================*/
.page-full-content{max-width:900px;margin-inline:auto}
.page-full-thumbnail{margin-bottom:var(--space-2xl);border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.page-full-img{width:100%;height:auto;display:block}
.page-full-header{text-align:center;margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl);border-bottom:2px solid rgba(var(--color-primary-rgb),0.08)}
.page-full-title{font-family:var(--font-extrabold);font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:var(--space-md);line-height:1.4}
.page-full-excerpt{font-size:1.1rem;color:var(--color-dark-gray);line-height:2.1;max-width:650px;margin-inline:auto}
.page-full-footer{margin-top:var(--space-3xl);padding-top:var(--space-xl);border-top:2px solid rgba(var(--color-primary-rgb),0.08);text-align:center}
.page-full-updated{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:.85rem;color:var(--color-gray)}
@media(max-width:768px){.page-full-content{max-width:100%}}

/*=============================================
   ARCHIVE
   =============================================*/
.archive-header{margin-bottom:var(--space-2xl)}
.archive-title{font-family:var(--font-extrabold);font-size:clamp(1.5rem,3vw,2rem);margin-bottom:var(--space-sm)}
.archive-description{color:var(--color-dark-gray);font-size:.95rem;line-height:2}
.archive-toolbar{display:flex;justify-content:space-between;align-items:center;background:var(--color-white);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-sm);margin-bottom:var(--space-xl)}
.archive-count{font-weight:600;font-size:.9rem;color:var(--color-heading)}
.archive-sort{display:flex;align-items:center;gap:var(--space-sm)}
.sort-label{font-size:.85rem;color:var(--color-dark-gray)}
.sort-select{padding:var(--space-xs) var(--space-md);border:1px solid var(--color-light-gray);border-radius:var(--radius-md);font-family:inherit;font-size:.85rem;color:var(--color-heading);background:var(--color-off-white);cursor:pointer;transition:border-color var(--transition-fast)}
.sort-select:focus{outline:none;border-color:var(--color-primary)}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-xl);margin-bottom:var(--space-3xl)}
.archive-card{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(0,0,0,0.04);transition:all var(--transition-base)}
.archive-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.archive-card-link{display:block;color:inherit}
.archive-card-image{position:relative;overflow:hidden;aspect-ratio:2/1}
.archive-card-img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.archive-card:hover .archive-card-img{transform:scale(1.05)}
.archive-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-light-gray);color:var(--color-gray)}
.archive-card-category{position:absolute;top:var(--space-sm);right:var(--space-sm);padding:.25rem .75rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border-radius:var(--radius-full);font-size:.7rem;font-weight:600;color:var(--color-primary);z-index:var(--z-base)}
.archive-card-body{padding:var(--space-lg)}
.archive-card-title{font-family:var(--font-bold);font-size:1rem;margin-bottom:var(--space-xs);color:var(--color-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--transition-fast)}
.archive-card:hover .archive-card-title{color:var(--color-primary)}
.archive-card-excerpt{font-size:.85rem;color:var(--color-dark-gray);line-height:2;margin-bottom:var(--space-md);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.archive-card-meta{display:flex;align-items:center;gap:var(--space-sm)}
.archive-card-date{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;color:var(--color-gray)}
@media(max-width:768px){.archive-grid{grid-template-columns:1fr}.archive-toolbar{flex-direction:column;gap:var(--space-sm)}}

/*=============================================
   SEARCH PAGE
   =============================================*/
.search-header{margin-bottom:var(--space-2xl);padding-bottom:var(--space-lg);border-bottom:2px solid rgba(var(--color-primary-rgb),0.08)}
.search-title{font-family:var(--font-extrabold);font-size:clamp(1.25rem,2.5vw,1.75rem);color:var(--color-heading);margin-bottom:var(--space-xs)}
.search-title span{color:var(--color-primary)}
.search-count{font-size:.85rem;color:var(--color-dark-gray)}
.search-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-xl);margin-bottom:var(--space-3xl)}
.search-card{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(0,0,0,0.04);transition:all var(--transition-base)}
.search-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.search-card-link{display:block;color:inherit}
.search-card-image{position:relative;aspect-ratio:2/1;overflow:hidden}
.search-card-img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.search-card:hover .search-card-img{transform:scale(1.05)}
.search-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-light-gray);color:var(--color-gray)}
.search-card-type{position:absolute;top:var(--space-sm);right:var(--space-sm);padding:.25rem .75rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border-radius:var(--radius-full);font-size:.7rem;font-weight:600;color:var(--color-primary);z-index:var(--z-base)}
.search-card-body{padding:var(--space-lg)}
.search-card-title{font-family:var(--font-bold);font-size:1rem;margin-bottom:var(--space-xs);color:var(--color-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-card:hover .search-card-title{color:var(--color-primary)}
.search-card-excerpt{font-size:.85rem;color:var(--color-dark-gray);line-height:2;margin-bottom:var(--space-sm);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.search-card-meta{font-size:.75rem;color:var(--color-gray)}
.empty-state-illustration{max-width:350px;margin-inline:auto;margin-bottom:var(--space-2xl)}
.empty-state-svg{width:100%;height:auto}
.empty-state-search{display:flex;max-width:450px;margin-inline:auto;margin-bottom:var(--space-xl);position:relative}
.empty-state-search input{flex:1;padding:var(--space-md) var(--space-lg);padding-left:50px;border:2px solid var(--color-light-gray);border-radius:var(--radius-full);font-family:inherit;font-size:.95rem;color:var(--color-text);outline:none;transition:border-color var(--transition-fast)}
.empty-state-search input:focus{border-color:var(--color-primary)}
.empty-state-search button{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast)}
.empty-state-search button:hover{background:var(--color-primary-dark)}
@media(max-width:768px){.search-grid{grid-template-columns:1fr}}

/*=============================================
   404 PAGE
   =============================================*/
.error-page{min-height:80vh;display:flex;align-items:center;justify-content:center;padding-block:var(--space-5xl)}
.error-content{text-align:center;max-width:600px;margin-inline:auto}
.error-illustration{max-width:380px;margin-inline:auto;margin-bottom:var(--space-2xl)}
.error-svg{width:100%;height:auto}
.error-title{font-family:var(--font-extrabold);font-size:clamp(1.5rem,3vw,2rem);color:var(--color-heading);margin-bottom:var(--space-md)}
.error-description{font-size:1rem;color:var(--color-dark-gray);line-height:2.1;margin-bottom:var(--space-2xl)}
.error-actions{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center;margin-bottom:var(--space-2xl)}
.error-search{padding-top:var(--space-xl);border-top:1px solid var(--color-light-gray)}
.error-search p{font-size:.9rem;color:var(--color-dark-gray);margin-bottom:var(--space-md)}
.error-search form{display:flex;max-width:450px;margin-inline:auto;position:relative}
.error-search input{flex:1;padding:var(--space-md) var(--space-lg);padding-left:50px;border:2px solid var(--color-light-gray);border-radius:var(--radius-full);font-family:inherit;font-size:.95rem;color:var(--color-text);outline:none;transition:border-color var(--transition-fast)}
.error-search input:focus{border-color:var(--color-primary)}
.error-search button{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast)}
.error-search button:hover{background:var(--color-primary-dark)}
@media(max-width:480px){.error-actions{flex-direction:column}.error-actions .btn{width:100%;justify-content:center}}

/*=============================================
   COMMENTS
   =============================================*/
.dw-comments{margin-top:var(--space-2xl)}
.dw-comments-title{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-bold);font-size:1.15rem;color:var(--color-heading);margin-bottom:var(--space-xl);padding-bottom:var(--space-sm);border-bottom:2px solid rgba(var(--color-primary-rgb),0.1)}
.dw-comments-title svg{color:var(--color-primary)}
.dw-comment-list{list-style:none;padding:0;margin:0}
.dw-comment{margin-bottom:var(--space-lg)}
.dw-comment-body{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-lg);border:1px solid rgba(0,0,0,0.04);border-right:3px solid var(--color-light-gray);transition:border-color var(--transition-fast)}
.dw-comment-body:hover{border-right-color:var(--color-primary)}
.comment-admin .dw-comment-body{border-right-color:var(--color-primary);background:rgba(var(--color-primary-rgb),0.02)}
.dw-comment-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}
.dw-comment-avatar{flex-shrink:0}
.dw-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--color-light-gray)}
.dw-comment-meta{flex:1}
.dw-comment-author{font-family:var(--font-bold);font-size:.95rem;margin-bottom:2px}
.dw-comment-author a{color:var(--color-heading)}
.dw-comment-date{font-size:.75rem;color:var(--color-gray)}
.dw-comment-date a{color:var(--color-gray)}
.dw-comment-content{font-size:.9rem;line-height:2;color:var(--color-text);margin-bottom:var(--space-sm)}
.dw-comment-footer{text-align:left}
.dw-reply-link a{display:inline-block;padding:.35rem 1rem;background:rgba(var(--color-primary-rgb),0.06);color:var(--color-primary);border-radius:var(--radius-full);font-size:.8rem;font-weight:600;transition:all var(--transition-fast)}
.dw-reply-link a:hover{background:var(--color-primary);color:#fff}
.dw-comment .children{list-style:none;padding-right:var(--space-2xl);margin-top:var(--space-md)}
.dw-comment-form{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-xl);border:1px solid rgba(0,0,0,0.04);margin-top:var(--space-xl)}
.dw-comment-form-title{display:flex;gap:5px;align-items:center;font-family:var(--font-bold);font-size:1.1rem;margin-bottom:var(--space-lg)}
.dw-form-group{margin-bottom:var(--space-md)}
.dw-form-group label{display:block;font-weight:600;font-size:.85rem;color:var(--color-heading);margin-bottom:var(--space-xs)}
.dw-form-group label span{color:var(--color-red)}
.dw-form-group input,.dw-form-group textarea{width:100%;padding:var(--space-md);border:2px solid var(--color-light-gray);border-radius:var(--radius-lg);font-family:inherit;font-size:.9rem;color:var(--color-text);transition:border-color var(--transition-fast);background:var(--color-off-white)}
.dw-form-group input:focus,.dw-form-group textarea:focus{outline:none;border-color:var(--color-primary);background:var(--color-white)}
.dw-form-group textarea{resize:vertical;min-height:140px}
.dw-form-submit{padding:.75rem 2rem;background:var(--color-primary);color:#fff;font-family:inherit;font-weight:600;font-size:.9rem;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base)}
.dw-form-submit:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 4px 15px rgba(var(--color-primary-rgb),0.3)}
.dw-comments-empty{display:flex;gap:5px;align-items:center;justify-content:center;padding:var(--space-3xl);color:var(--color-gray)}
.dw-comments-empty p{font-size:.95rem;color:var(--color-dark-gray)}
.dw-logged-in{font-size:.85rem;color:var(--color-dark-gray);margin-bottom:var(--space-md)}
.dw-logged-in a{color:var(--color-primary);font-weight:600}
.dw-comments-pagination{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-xl)}
.dw-comments-pagination .page-numbers{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);font-weight:600;font-size:.85rem;color:var(--color-heading);transition:all var(--transition-fast)}
.dw-comments-pagination .page-numbers:hover{background:rgba(var(--color-primary-rgb),0.06);color:var(--color-primary)}
.dw-comments-pagination .page-numbers.current{background:var(--color-primary);color:#fff}
@media(max-width:991px){.dw-comment .children{padding-right:var(--space-md)}}
@media(max-width:480px){.dw-comment .children{padding-right:var(--space-sm)}}

/*=============================================
   PORTFOLIO SINGLE
   =============================================*/
.portfolio-hero{background:linear-gradient(135deg,rgba(var(--color-primary-rgb),0.03) 0%,rgba(var(--color-primary-rgb),0.06) 100%);padding-block:var(--space-3xl);text-align:center}
.portfolio-title{font-family:var(--font-extrabold);font-size:clamp(1.75rem,4vw,2.5rem);color:var(--color-heading);margin-top:var(--space-lg)}
.portfolio-grid{display:grid;grid-template-columns:1fr 380px;gap:var(--space-2xl);align-items:start;margin-top:var(--space-2xl)}
.portfolio-image-wrapper{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.portfolio-image{width:100%;height:auto;display:block}
.portfolio-details-card{background:var(--color-white);border-radius:var(--radius-2xl);padding:var(--space-xl);border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-sm);position:sticky;top:100px}
.portfolio-details-title{font-family:var(--font-bold);font-size:1.1rem;color:var(--color-heading);margin-bottom:var(--space-lg);padding-bottom:var(--space-sm);border-bottom:2px solid rgba(var(--color-primary-rgb),0.1)}
.portfolio-details-list{list-style:none;padding:0;margin:0 0 var(--space-lg) 0}
.portfolio-details-list li{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) 0;border-bottom:1px solid rgba(0,0,0,0.03);font-size:.9rem}
.portfolio-details-list li:last-child{border-bottom:none}
.detail-label{display:inline-flex;align-items:center;gap:var(--space-xs);color:var(--color-dark-gray);font-weight:500;flex-shrink:0}
.detail-label svg{color:var(--color-primary);flex-shrink:0}
.detail-value{font-weight:600;color:var(--color-heading);text-align:left;max-width:55%}
.portfolio-visit-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;padding:var(--space-md);background:var(--color-primary);color:#fff;border-radius:var(--radius-full);font-weight:600;font-size:.95rem;transition:all var(--transition-base)}
.portfolio-visit-btn:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 8px 25px rgba(var(--color-primary-rgb),0.3);color:#fff}
.portfolio-content{margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:2px solid rgba(var(--color-primary-rgb),0.08)}
.portfolio-content-title{font-family:var(--font-bold);font-size:1.3rem;color:var(--color-heading);margin-bottom:var(--space-xl)}
.portfolio-content-body{font-size:1rem;line-height:2.1;color:var(--color-text);text-align:justify}
@media(max-width:991px){.portfolio-grid{grid-template-columns:1fr}.portfolio-details-card{position:static}}

/*=============================================
   PORTFOLIO ARCHIVE
   =============================================*/
.archive-portfolio-header{text-align:center;margin-bottom:var(--space-3xl);padding-top:var(--space-lg)}
.archive-portfolio-title{font-family:var(--font-extrabold);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--color-heading);margin-bottom:var(--space-xs)}
.archive-portfolio-count{font-size:.9rem;color:var(--color-dark-gray);background:rgba(var(--color-primary-rgb),0.06);padding:var(--space-xs) var(--space-lg);border-radius:var(--radius-full);display:inline-block}
.portfolio-grid-archive{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:var(--space-xl);margin-bottom:var(--space-3xl)}
.portfolio-card-archive{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(0,0,0,0.04);transition:all var(--transition-base)}
.portfolio-card-archive:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
.portfolio-card-link{display:block;color:inherit}
.portfolio-card-image{position:relative;aspect-ratio:16/9;overflow:hidden}
.portfolio-card-img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.portfolio-card-archive:hover .portfolio-card-img{transform:scale(1.05)}
.portfolio-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-light-gray);color:var(--color-gray)}
.portfolio-card-type{position:absolute;top:var(--space-md);right:var(--space-md);padding:.35rem 1rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border-radius:var(--radius-full);font-size:.75rem;font-weight:700;color:var(--color-primary);z-index:var(--z-base);box-shadow:var(--shadow-sm)}
.portfolio-card-overlay{position:absolute;inset:0;background:rgba(var(--color-primary-rgb),0.85);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-base);z-index:calc(var(--z-base) + 1)}
.portfolio-card-archive:hover .portfolio-card-overlay{opacity:1}
.portfolio-card-view{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);color:#fff;font-weight:700;font-size:1rem;transform:translateY(10px);transition:transform var(--transition-base)}
.portfolio-card-archive:hover .portfolio-card-view{transform:translateY(0)}
.portfolio-card-body{padding:var(--space-lg);text-align:center}
.portfolio-card-title{font-family:var(--font-bold);font-size:1.05rem;color:var(--color-heading);margin-bottom:var(--space-xs);transition:color var(--transition-fast)}
.portfolio-card-archive:hover .portfolio-card-title{color:var(--color-primary)}
.portfolio-card-category{font-size:.8rem;color:var(--color-dark-gray)}
@media(max-width:768px){.portfolio-grid-archive{grid-template-columns:1fr}}

/*=============================================
   PRICING PAGES (Support & Web)
   =============================================*/
.pricing-header{text-align:center;margin-bottom:var(--space-2xl)}
.pricing-title{font-family:var(--font-extrabold);font-size:clamp(1.5rem,4vw,2.5rem);color:var(--color-heading);margin-bottom:var(--space-sm)}
.pricing-subtitle{font-size:1.05rem;color:var(--color-dark-gray);max-width:600px;margin-inline:auto;line-height:2}
.pricing-intro{max-width:800px;margin-inline:auto;font-size:1rem;line-height:2.1;color:var(--color-text);text-align:justify;margin-bottom:var(--space-2xl)}
.pricing-alert{display:flex;align-items:flex-start;gap:var(--space-md);background:rgba(var(--color-primary-rgb),0.04);border:1px solid rgba(var(--color-primary-rgb),0.1);border-radius:var(--radius-xl);padding:var(--space-lg) var(--space-xl);margin-bottom:var(--space-3xl);max-width:800px;margin-inline:auto}
.pricing-alert svg{flex-shrink:0;color:var(--color-primary);margin-top:2px}
.pricing-alert p{font-size:.9rem;color:var(--color-heading);line-height:2}
.pricing-section{margin-bottom:var(--space-5xl)}
.pricing-section-title{text-align:center;font-family:var(--font-extrabold);font-size:1.5rem;color:var(--color-heading);margin-bottom:var(--space-2xl);position:relative;padding-bottom:var(--space-md)}
.pricing-section-title::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:3px;background:var(--color-primary);border-radius:var(--radius-full)}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-xl);align-items:start;max-width:1100px;margin-inline:auto;padding-bottom:var(--space-5xl)}
.pricing-card{position:relative;background:var(--color-white);border-radius:var(--radius-2xl);padding:var(--space-2xl);border:1px solid rgba(0,0,0,0.06);text-align:center;transition:all var(--transition-base);overflow:hidden}
.pricing-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--plan-color)}
.pricing-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(var(--plan-color-rgb),0.12)}
.pricing-card-popular{border-color:rgba(var(--plan-color-rgb),0.3);box-shadow:0 10px 40px rgba(var(--plan-color-rgb),0.1);transform:scale(1.03)}
.pricing-card-popular:hover{transform:scale(1.03) translateY(-8px)}
.pricing-badge{position:absolute;top:var(--space-lg);left:var(--space-lg);padding:.3rem 1rem;background:var(--plan-color);color:#fff;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;letter-spacing:0.5px}
.pricing-card-header{margin-bottom:var(--space-xl);padding-top:var(--space-md)}
.pricing-card-name{font-family:var(--font-extrabold);font-size:1.4rem;color:var(--color-heading);margin-bottom:var(--space-xs)}
.pricing-card-desc{font-size:.85rem;color:var(--color-dark-gray)}
.pricing-card-price{margin-bottom:var(--space-xl);padding:var(--space-lg) 0;border-top:1px solid var(--color-light-gray);border-bottom:1px solid var(--color-light-gray)}
.pricing-amount{display:block;font-family:var(--font-black);font-size:2.5rem;color:var(--plan-color);letter-spacing:-1px;line-height:1;margin-bottom:var(--space-xs)}
.pricing-unit{font-size:.85rem;color:var(--color-dark-gray)}
.pricing-from{font-size:.8rem;color:var(--color-dark-gray);margin-left:4px}
.pricing-btn{display:block;width:100%;padding:.9rem;background:var(--plan-color);color:#fff;border-radius:var(--radius-full);font-weight:700;font-size:1rem;letter-spacing:2px;transition:all var(--transition-base);text-align:center}
.pricing-btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 8px 25px rgba(var(--plan-color-rgb),0.35);color:#fff}

/* Pricing Features - Support Page (Checkmarks) */
.pricing-features-check{list-style:none;padding:0;margin:0 0 var(--space-xl) 0;text-align:right}
.pricing-features-check li{position:relative;padding:.5rem 1.8rem .5rem 0;font-size:.9rem;color:var(--color-text);line-height:1.9}
.pricing-features-check li::before{content:"";position:absolute;right:0;top:.55rem;width:18px;height:18px;background-color:rgba(39,174,96,0.1);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat}

/* Pricing Features - Web Design Page (Label/Value) */
.pricing-features{list-style:none;padding:0;margin:0 0 var(--space-xl) 0}
.pricing-features li{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) 0;border-bottom:1px solid rgba(0,0,0,0.03);font-size:.9rem;color:var(--color-text)}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li::before{display:none!important;content:none!important}
.feature-label{color:var(--color-text);flex-shrink:0}
.feature-value{font-weight:600;color:var(--color-heading);font-size:.85rem;text-align:left;max-width:50%}
.feature-value a{color:var(--color-primary);text-decoration:underline}
.feature-check{width:20px;height:20px;background:rgba(39,174,96,0.1);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;flex-shrink:0}
.feature-cross{opacity:.6}
.feature-cross-icon{width:20px;height:20px;background:rgba(231,76,60,0.1);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e74c3c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;flex-shrink:0}

/* Special Card */
.pricing-card-special{background:var(--plan-color);color:#fff}
.pricing-card-special .pricing-card-name,.pricing-card-special .pricing-amount{color:#fff}
.pricing-card-special .pricing-card-desc,.pricing-card-special .pricing-unit{color:rgba(255,255,255,0.8)}
.pricing-card-special .pricing-card-price{border-top-color:rgba(255,255,255,0.2);border-bottom-color:rgba(255,255,255,0.2)}
.pricing-card-special .pricing-features li{color:rgba(255,255,255,0.9);border-bottom-color:rgba(255,255,255,0.1)}
.pricing-card-special .feature-label{color:rgba(255,255,255,0.9)}
.pricing-card-special .feature-value{color:#fff}
.pricing-card-special .feature-check{background-color:rgba(255,255,255,0.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.pricing-card-special .feature-cross-icon{background-color:rgba(255,255,255,0.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")}
.pricing-card-special .pricing-btn{background:#fff;color:var(--plan-color)}
.pricing-card-special .pricing-btn:hover{background:rgba(255,255,255,0.9);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.pricing-card-special .pricing-badge{background:#fff;color:var(--plan-color)}
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr;max-width:450px}.pricing-card-popular{transform:none}.pricing-card-popular:hover{transform:translateY(-8px)}}

/*=============================================
   SHOP (ChabokMart)
   =============================================*/
.shop-header{text-align:center;margin-bottom:var(--space-2xl)}
.shop-title{font-family:var(--font-extrabold);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--color-heading);margin-bottom:var(--space-xs)}
.shop-count{font-size:.9rem;color:var(--color-dark-gray);background:rgba(var(--color-primary-rgb),0.06);padding:var(--space-xs) var(--space-lg);border-radius:var(--radius-full);display:inline-block}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-md);background:var(--color-white);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-sm);margin-bottom:var(--space-xl)}
.shop-toolbar-count{font-weight:600;font-size:.9rem;color:var(--color-heading)}
.shop-toolbar-form{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.shop-toggle{display:inline-flex;align-items:center;gap:var(--space-sm);cursor:pointer;user-select:none}
.shop-toggle input{display:none}
.shop-toggle-switch{position:relative;width:36px;height:20px;background:#d1d5db;border-radius:10px;transition:background .25s ease;flex-shrink:0}
.shop-toggle-switch::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .25s ease;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.shop-toggle input:checked+.shop-toggle-switch{background:#10b981}
.shop-toggle input:checked+.shop-toggle-switch::after{transform:translateX(16px)}
.shop-toggle-label{font-size:.85rem;font-weight:500;color:var(--color-heading)}
.shop-select{padding:var(--space-xs) var(--space-md);border:1px solid var(--color-light-gray);border-radius:var(--radius-md);font-family:inherit;font-size:.85rem;color:var(--color-heading);background:var(--color-off-white);cursor:pointer;transition:border-color var(--transition-fast)}
.shop-select:focus{outline:none;border-color:var(--color-primary)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-xl);margin-bottom:var(--space-3xl)}
.shop-card{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(0,0,0,0.04);transition:all var(--transition-base)}
.shop-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.shop-card-link{display:block;color:inherit}
.shop-card-image{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-off-white);display:flex;align-items:center;justify-content:center}
.shop-card-img{width:100%;height:100%;object-fit:contain;padding:var(--space-lg);transition:transform var(--transition-slow)}
.shop-card:hover .shop-card-img{transform:scale(1.05)}
.shop-card-placeholder{color:var(--color-gray)}
.shop-card-badges{position:absolute;top:var(--space-sm);right:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs);z-index:var(--z-base)}
.shop-badge{padding:.3rem .7rem;border-radius:var(--radius-full);font-size:.7rem;font-weight:700;color:#fff}
.shop-badge-sale{background:#e74c3c}.shop-badge-out{background:#64748b}
.shop-card-body{padding:var(--space-lg)}
.shop-card-title{font-family:var(--font-bold);font-size:.95rem;margin-bottom:var(--space-sm);color:var(--color-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--transition-fast)}
.shop-card:hover .shop-card-title{color:var(--color-primary)}
.shop-card-categories{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-md)}
.shop-card-cat{padding:.15rem .6rem;background:var(--color-light-gray);border-radius:var(--radius-full);font-size:.7rem;color:var(--color-dark-gray)}
.shop-card-footer{display:flex;justify-content:space-between;align-items:flex-end;padding-top:var(--space-md);border-top:1px solid rgba(0,0,0,0.04)}
.shop-card-stats{display:flex;flex-direction:column;align-items:center}
.shop-card-sales{font-family:var(--font-bold);font-size:1.1rem;color:var(--color-primary);line-height:1}
.shop-card-sales-label{font-size:.7rem;color:var(--color-gray)}
.shop-card-price{display:flex;flex-direction:column;align-items:flex-end}
.shop-price-free{font-family:var(--font-bold);font-size:1.1rem;color:#27ae60}
.shop-price-old{font-size:.75rem;color:var(--color-gray);text-decoration:line-through}
.shop-price-current{font-family:var(--font-bold);font-size:1.1rem;color:var(--color-heading)}
.shop-price-sale{color:#e74c3c}
.shop-price-unit{font-size:.7rem;color:var(--color-gray)}
@media(max-width:768px){.shop-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.shop-toolbar{flex-direction:column}}

/*=============================================
   SINGLE PRODUCT (ChabokMart)
   =============================================*/
.product-hero{background:linear-gradient(135deg,rgba(var(--color-primary-rgb),0.03) 0%,rgba(var(--color-primary-rgb),0.06) 100%);padding-block:var(--space-3xl);text-align:center}
.product-hero-title{font-family:var(--font-extrabold);font-size:clamp(1.5rem,3vw,2.2rem);margin-top:var(--space-lg)}
.product-hero-subtitle{color:var(--color-dark-gray);font-size:1rem;margin-top:var(--space-sm)}
.product-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:start;margin-block:var(--space-2xl)}
.product-image-wrapper{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.product-image{width:100%;height:auto;display:block}
.product-image-placeholder{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:var(--color-off-white);color:var(--color-gray);border-radius:var(--radius-2xl)}
.product-info-card{display:flex;flex-direction:column;gap:var(--space-lg)}
.product-meta-row{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}
.product-meta-badge{display:inline-flex;align-items:center;gap:6px;padding:.3rem .8rem;background:rgba(var(--color-primary-rgb),0.05);border-radius:var(--radius-full);font-size:.8rem;font-weight:600;color:var(--color-primary)}
.product-excerpt{font-size:.95rem;line-height:2.1;color:var(--color-text);text-align:justify}
.product-bottom-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-light-gray)}
.product-stats-mini{display:flex;align-items:center;gap:var(--space-sm)}
.stats-icon{color:var(--color-primary);flex-shrink:0}
.stats-text{display:flex;flex-direction:column;line-height:1.2}
.stats-text strong{font-size:1.1rem;color:var(--color-heading)}
.stats-text small{font-size:.7rem;color:var(--color-gray)}

/* Product Content Section */
.product-content-section{padding-block:var(--space-4xl);background:var(--color-off-white)}
.product-content-grid{display:grid;grid-template-columns:1fr 350px;gap:var(--space-2xl);align-items:start}
.product-tabs-wrapper{background:var(--color-white);border-radius:var(--radius-xl);border:1px solid rgba(0,0,0,0.04);overflow:hidden}
.product-tabs-nav{display:flex;border-bottom:2px solid var(--color-light-gray)}
.product-tab-btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);font-weight:600;font-size:.9rem;color:var(--color-dark-gray);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all var(--transition-fast);cursor:pointer}
.product-tab-btn:hover{color:var(--color-primary)}
.product-tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;background:var(--color-primary);color:#fff;border-radius:var(--radius-full);font-size:.7rem;font-weight:700;padding:0 6px}
.product-tabs-content{padding:var(--space-xl)}
.product-tab-panel{display:none}
.product-tab-panel.active{display:block}
.empty-tab-content{text-align:center;padding:var(--space-3xl);color:var(--color-gray)}
.empty-tab-content svg{margin-bottom:var(--space-md)}
.empty-tab-content p{font-size:.95rem;color:var(--color-dark-gray)}

/* Product Sidebar */
.product-sidebar{display:flex;flex-direction:column;gap:var(--space-lg);position:sticky;top:100px}
.sidebar-box{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-lg);border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-sm)}
.sidebar-price{text-align:center;direction:ltr}
.price-free{font-family:var(--font-black);font-size:1.5rem;color:#27ae60}
.price-old{display:block;font-size:.85rem;color:var(--color-gray);text-decoration:line-through;margin-bottom:2px}
.price-current{font-family:var(--font-bold);font-size:1.8rem;color:var(--color-heading)}
.price-sale{color:#e74c3c}
.price-unit{font-size:.8rem;color:var(--color-dark-gray)}
.rule-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) 0;font-size:.85rem;color:var(--color-dark-gray)}
.rule-icon{width:18px;height:18px;border-radius:50%;flex-shrink:0;background-position:center;background-repeat:no-repeat}
.rule-check{background-color:rgba(39,174,96,0.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

/* Sidebar Buttons */
.sidebar-actions{display:flex;flex-direction:column;gap:var(--space-sm)}
.sidebar-actions .btn-block{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;padding:.85rem 1.5rem;font-weight:700;font-size:.95rem;border-radius:var(--radius-lg);transition:all var(--transition-base);border:none;cursor:pointer;text-align:center;font-family:inherit}
.sidebar-actions .btn-success{background:linear-gradient(135deg,#27ae60 0%,#2ecc71 100%);color:#fff;box-shadow:0 4px 15px rgba(39,174,96,0.3)}
.sidebar-actions .btn-success:hover{background:linear-gradient(135deg,#219a52 0%,#27ae60 100%);transform:translateY(-2px);box-shadow:0 8px 25px rgba(39,174,96,0.4);color:#fff}
.sidebar-actions .btn-warning{background:linear-gradient(135deg,#f39c12 0%,#f1c40f 100%);color:#1a202c;box-shadow:0 4px 15px rgba(243,156,18,0.3)}
.sidebar-actions .btn-warning:hover{background:linear-gradient(135deg,#e67e22 0%,#f39c12 100%);transform:translateY(-2px);box-shadow:0 8px 25px rgba(243,156,18,0.4);color:#1a202c}
.sidebar-actions .btn-primary,.sidebar-actions .chabok-add-to-cart{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);color:#fff;box-shadow:0 4px 15px rgba(var(--color-primary-rgb),0.3)}
.sidebar-actions .btn-primary:hover,.sidebar-actions .chabok-add-to-cart:hover{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);transform:translateY(-2px);box-shadow:0 8px 25px rgba(var(--color-primary-rgb),0.4);color:#fff}
.sidebar-actions .btn-disabled{background:linear-gradient(135deg,#95a5a6 0%,#bdc3c7 100%);color:#fff;cursor:not-allowed;opacity:.85;box-shadow:0 4px 15px rgba(149,165,166,0.2);pointer-events:none}
.sidebar-actions .btn-outline{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}
.sidebar-actions .btn-outline:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px rgba(var(--color-primary-rgb),0.3)}
.sidebar-actions .btn-block:active{transform:scale(0.97)!important}
.sidebar-actions .btn-block svg{flex-shrink:0;width:18px;height:18px}

/* Sidebar Meta, Progress, Tags */
.sidebar-meta .meta-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) 0;font-size:.85rem;color:var(--color-dark-gray);border-bottom:1px solid rgba(0,0,0,0.03)}
.sidebar-meta .meta-item:last-child{border-bottom:none}
.sidebar-meta .meta-item strong{color:var(--color-heading)}
.text-green{color:#27ae60}
.sidebar-progress .progress-header{display:flex;justify-content:space-between;font-size:.85rem;color:var(--color-dark-gray);margin-bottom:var(--space-sm)}
.sidebar-progress .progress-bar{height:8px;background:var(--color-light-gray);border-radius:var(--radius-full);overflow:hidden}
.sidebar-progress .progress-fill{height:100%;background:linear-gradient(to right,#4caf50,#ffa500);border-radius:var(--radius-full);transition:width .5s ease}
.sidebar-tags .tags-title{font-size:.85rem;font-weight:600;color:var(--color-heading);display:block;margin-bottom:var(--space-sm)}
.sidebar-tags .tags-list{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.tag-pill{display:inline-block;padding:.25rem .75rem;background:rgba(var(--color-primary-rgb),0.06);color:var(--color-primary);border-radius:var(--radius-full);font-size:.75rem;font-weight:500;transition:all var(--transition-fast)}
.tag-pill:hover{background:var(--color-primary);color:#fff}
.product-widget-area{margin-top:var(--space-md)}
.btn-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-full);border:2px solid var(--color-light-gray);background:var(--color-white);color:var(--color-dark-gray);transition:all var(--transition-base);flex-shrink:0}
.btn-icon:hover{border-color:var(--color-primary);background:var(--color-primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 15px rgba(var(--color-primary-rgb),0.3)}
@media(max-width:991px){.product-main-grid{grid-template-columns:1fr}.product-content-grid{grid-template-columns:1fr}.product-sidebar{position:static}}

/*=============================================
   WIDGETS
   =============================================*/
.dw-widget{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-lg);border:1px solid rgba(0,0,0,0.04);box-shadow:var(--shadow-sm)}
.dw-widget-title{display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-bold);font-size:1rem;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:2px solid rgba(var(--color-primary-rgb),0.1);color:var(--color-heading)}
.dw-widget ul{list-style:none;padding:0;margin:0}
.dw-widget ul li{margin-bottom:var(--space-sm)}
.dw-widget ul li a{display:block;padding:var(--space-xs) 0;color:var(--color-text);transition:color var(--transition-fast),padding var(--transition-fast);font-size:.9rem}
.dw-widget ul li a:hover{color:var(--color-primary);padding-right:4px}
.dw-widget-blue{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.dw-widget-blue .dw-widget-title{color:#fff;border-bottom-color:rgba(255,255,255,0.2)}
.dw-widget-blue .dw-widget-list li a{color:rgba(255,255,255,0.9)}
.dw-widget-blue .dw-widget-list li a:hover{color:#fff;padding-right:6px}
.dw-widget-orange{background:var(--color-orange);border-color:var(--color-orange);color:#fff}
.dw-widget-orange .dw-widget-title{color:#fff;border-bottom-color:rgba(255,255,255,0.2)}
.dw-widget-orange .dw-widget-list li a{color:rgba(255,255,255,0.9)}
.dw-widget-orange .dw-widget-list li a:hover{color:#fff;padding-right:6px}
.dw-widget-icon{display:inline-flex;align-items:center}
.dw-widget-list{list-style:none;padding:0;margin:0}
.dw-widget-list li{margin-bottom:var(--space-sm)}
.dw-widget-list li:last-child{margin-bottom:0}
.dw-widget-list li a{display:block;padding:var(--space-xs) 0;font-size:.9rem;transition:all var(--transition-fast)}
.dw-widget-list li a:hover{padding-right:4px}