/* ==========================================================================
   digikala-base.css — Digikala-like Base Layout (Header, Footer, Reset)
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700;800&display=swap');

   :root {
       --dk-red: var(--color-primary, #ef394e);
       --dk-red-hover: var(--color-primary-hover, #d32f42);
       --dk-gray-50: var(--color-bg-page, #f8f9fa);
       --dk-gray-100: var(--color-bg-subtle, #f1f2f4);
       --dk-gray-200: var(--color-border, #e0e0e2);
       --dk-gray-300: #c0c2c5;
       --dk-gray-400: #a1a3a8;
       --dk-gray-500: var(--color-text-muted, #81858b);
       --dk-gray-600: var(--color-text-secondary, #62666d);
       --dk-gray-700: #424750;
       --dk-gray-800: var(--color-secondary, #232933);
       --dk-gray-900: #080a0b;
    
       --dk-border: var(--color-border, #e0e0e2);
       --dk-surface: var(--color-bg-surface, #ffffff);
       --dk-text: var(--color-text-main, #3f4064);
    
       --font-vazir: var(--font-sans, 'Vazirmatn', IRANSans, tahoma, sans-serif);
       --header-zindex: 1000;
       --overlay-zindex: 900;
   }
   
   *, *::before, *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   body {
       font-family: var(--font-vazir);
       background-color: var(--dk-gray-50);
       color: var(--dk-text);
       direction: rtl;
       line-height: 1.6;
       font-size: 14px;
       -webkit-font-smoothing: antialiased;
       display: flex;
       flex-direction: column;
       min-height: 100vh;
   }
   
   a { text-decoration: none; color: inherit; }
   ul { list-style: none; }
   button, input { font-family: inherit; }
   
   .dk-main { flex: 1; }
   
   /* Overlay */
   .dk-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0,0,0,0.5);
       z-index: var(--overlay-zindex);
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s ease;
   }
   .dk-overlay.active {
       opacity: 1;
       visibility: visible;
   }
   
   /* ==========================================================================
      Header
      ========================================================================== */
   .dk-header {
       background: var(--dk-surface);
       position: sticky;
       top: 0;
       z-index: var(--header-zindex);
       box-shadow: 0 1px 2px rgba(0,0,0,0.05);
   }
   
   .dk-header-container {
       max-width: 1676px;
       margin: 0 auto;
       padding: 0 16px;
   }
   
   /* --- Top Row --- */
   .dk-header-top {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 12px 0;
   }
   
   .dk-header-right {
       display: flex;
       align-items: center;
       gap: 20px;
       flex: 1;
   }
   
   .dk-logo img {
       max-height: 30px;
   }
   
   /* Search */
   .dk-search-container {
       position: relative;
       flex: 1;
       max-width: 600px;
   }
   
   .dk-search-form {
       display: flex;
       align-items: center;
       background: var(--dk-gray-100);
       border-radius: 8px;
       padding: 0 16px;
       height: 44px;
       transition: background 0.2s;
   }
   .dk-search-container.active .dk-search-form {
       background: var(--dk-surface);
       border-radius: 8px 8px 0 0;
       border-bottom: 1px solid var(--dk-red);
   }
   
   .dk-search-icon { color: var(--dk-gray-500); margin-left: 8px; }
   .dk-search-input {
       border: none;
       background: transparent;
       width: 100%;
       outline: none;
       font-size: 14px;
       color: var(--dk-gray-800);
   }
   .dk-search-input::placeholder { color: var(--dk-gray-500); }
   
   /* Search Dropdown */
   .dk-search-dropdown {
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       background: var(--dk-surface);
       border-radius: 0 0 8px 8px;
       box-shadow: 0 4px 8px rgba(0,0,0,0.1);
       display: none;
       max-height: 400px;
       overflow-y: auto;
       z-index: calc(var(--header-zindex) + 1);
       padding-bottom: 12px;
   }
   .dk-search-container.active .dk-search-dropdown,
   .dk-mobile-search-bar.active .dk-search-dropdown { display: block; }
   
   .dk-search-history-header {
       display: flex;
       justify-content: space-between;
       padding: 12px 16px 8px;
       font-size: 12px;
       font-weight: 700;
       color: var(--dk-gray-700);
   }
   .dk-clear-history-btn { background: none; border: none; color: var(--dk-gray-500); cursor: pointer; }
   
   .dk-search-history-list {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       padding: 0 16px;
   }
   .dk-history-item {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       padding: 6px 12px;
       border: 1px solid var(--dk-border);
       border-radius: 16px;
       font-size: 12px;
       color: var(--dk-gray-700);
       cursor: pointer;
   }
   .dk-history-item:hover { border-color: var(--dk-gray-400); }
   .dk-history-item-remove { color: var(--dk-gray-400); padding: 2px; }
   
   /* Live Search Results */
   .dk-live-search-item {
       display: flex;
       align-items: center;
       padding: 10px 16px;
       border-bottom: 1px solid var(--dk-gray-100);
       gap: 12px;
   }
   .dk-live-search-item:hover { background: var(--dk-gray-50); }
   .dk-live-search-img { width: 40px; height: 40px; object-fit: contain; }
   .dk-live-search-info { display: flex; flex-direction: column; }
   .dk-live-search-title { font-size: 13px; color: var(--dk-gray-800); }
   .dk-live-search-type { font-size: 10px; color: var(--dk-gray-500); background: var(--dk-gray-100); padding: 2px 6px; border-radius: 4px; align-self: flex-start; margin-top: 4px;}
   
   .dk-search-loading { display: flex; justify-content: center; padding: 20px; }
   .dk-spinner { width: 24px; height: 24px; border: 2px solid var(--dk-border); border-top-color: var(--dk-red); border-radius: 50%; animation: dk-spin 1s linear infinite; }
   @keyframes dk-spin { to { transform: rotate(360deg); } }
   
   /* Header Left Actions */
   .dk-header-left {
       display: flex;
       align-items: center;
       gap: 16px;
   }
   
   .dk-btn-login, .dk-btn-profile {
       display: flex;
       align-items: center;
       gap: 8px;
       border: 1px solid var(--dk-border);
       border-radius: 8px;
       padding: 0 16px;
       height: 40px;
       font-size: 12px;
       font-weight: 700;
       color: var(--dk-gray-700);
       transition: background 0.2s;
   }
   .dk-btn-login:hover { background: var(--dk-gray-50); }
   .dk-btn-profile { border: none; padding: 0; width: 40px; justify-content: center; background: none; }
   .dk-btn-profile:hover { background: var(--dk-gray-100); }
   
   .dk-divider-v {
       width: 1px;
       height: 24px;
       background: var(--dk-border);
   }
   
   .dk-btn-cart {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       color: var(--dk-gray-700);
   }
   .dk-cart-badge {
       position: absolute;
       bottom: 4px;
       right: -4px;
       background: var(--dk-red);
       color: white;
       font-size: 10px;
       font-weight: 700;
       min-width: 18px;
       height: 18px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 4px;
   }
   
   /* --- Bottom Row (Nav & Mega Menu) --- */
   .dk-header-bottom {
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 40px;
   }
   
   .dk-nav-links {
       display: flex;
       align-items: center;
       gap: 20px;
       height: 100%;
   }
   
   .dk-nav-item {
       display: flex;
       align-items: center;
       gap: 6px;
       color: var(--dk-gray-600);
       font-size: 12px;
       font-weight: 500;
       height: 100%;
       position: relative;
   }
   .dk-nav-item:hover,
   .dk-nav-item.active {
       color: var(--dk-red);
       font-weight: 700;
   }
   .dk-nav-item:hover::after,
   .dk-nav-item.active::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 2px;
       background: var(--dk-red);
   }
   
   .dk-location {
       display: flex;
       align-items: center;
       gap: 6px;
       color: var(--dk-gray-600);
       font-size: 12px;
       cursor: pointer;
   }
   
   /* Mega Menu */
   .dk-mega-menu-wrapper {
       position: relative;
       height: 100%;
   }
   
   .dk-mega-menu-trigger {
       display: flex;
       align-items: center;
       gap: 8px;
       height: 100%;
       background: none;
       border: none;
       font-weight: 700;
       font-size: 13px;
       color: var(--dk-gray-800);
       cursor: pointer;
       padding-right: 0;
   }
   .dk-mega-menu-trigger:hover { color: var(--dk-red); }
   
   .dk-mega-menu {
       position: absolute;
       top: 100%;
       right: 0;
       width: 900px; /* Adjust based on container */
       height: 450px;
       background: var(--dk-surface);
       border: 1px solid var(--dk-border);
       border-top: none;
       border-radius: 0 0 8px 8px;
       box-shadow: 0 4px 12px rgba(0,0,0,0.1);
       display: none;
       z-index: calc(var(--header-zindex) + 1);
   }
   .dk-mega-menu-wrapper:hover .dk-mega-menu,
   .dk-mega-menu-wrapper.active .dk-mega-menu {
       display: flex;
   }
   
   .dk-mega-menu-right {
       width: 200px;
       background: var(--dk-gray-50);
       border-left: 1px solid var(--dk-border);
       overflow-y: auto;
   }
   
   .dk-cat-root-list { list-style: none; padding: 12px 0; }
   .dk-cat-root-item {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 12px 16px;
       font-size: 12px;
       font-weight: 500;
       color: var(--dk-gray-800);
       cursor: pointer;
       transition: background 0.2s;
   }
   .dk-cat-root-item:hover, .dk-cat-root-item.active {
       background: var(--dk-surface);
       color: var(--dk-red);
   }
   .dk-cat-icon { width: 16px; height: 16px; }
   
   .dk-mega-menu-left {
       flex: 1;
       padding: 24px;
       overflow-y: auto;
   }
   
   .dk-cat-panel { display: none; }
   .dk-cat-panel.active { display: block; animation: dk-fade 0.2s ease; }
   @keyframes dk-fade { from { opacity: 0; } to { opacity: 1; } }
   
   .dk-cat-panel-all {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       font-size: 12px;
       font-weight: 700;
       color: var(--dk-gray-600);
       margin-bottom: 24px;
   }
   .dk-cat-panel-all:hover { color: var(--dk-red); }
   
   .dk-cat-sub-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
   }
   
   .dk-cat-sub-group { margin-bottom: 24px; }
   .dk-cat-sub-title {
       display: flex;
       align-items: center;
       gap: 4px;
       font-size: 14px;
       font-weight: 700;
       color: var(--dk-gray-800);
       margin-bottom: 12px;
       border-right: 2px solid var(--dk-red);
       padding-right: 8px;
   }
   .dk-cat-sub-title:hover { color: var(--dk-red); }
   
   .dk-cat-sub-list li { margin-bottom: 8px; }
   .dk-cat-sub-list a {
       font-size: 12px;
       color: var(--dk-gray-500);
   }
   .dk-cat-sub-list a:hover { color: var(--dk-red); }
   
   /* ==========================================================================
      Footer
      ========================================================================== */
   .dk-footer {
       background: var(--dk-surface);
       border-top: 1px solid var(--dk-border);
       padding-top: 32px;
       margin-top: 40px;
   }
   .dk-container {
       max-width: 1676px;
       margin: 0 auto;
       padding: 0 16px;
   }
   
   .dk-footer-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 32px;
   }
   
   .dk-footer-brand { display: flex; flex-direction: column; gap: 12px; }
   .dk-footer-brand img { height: 30px; align-self: flex-start; }
   .dk-footer-contact {
       display: flex;
       align-items: center;
       gap: 16px;
       font-size: 13px;
       color: var(--dk-gray-700);
   }
   .dk-divider { color: var(--dk-gray-300); }
   
   .dk-back-to-top {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 8px 16px;
       border: 1px solid var(--dk-border);
       border-radius: 8px;
       background: none;
       color: var(--dk-gray-600);
       font-size: 12px;
       font-weight: 700;
       cursor: pointer;
   }
   .dk-back-to-top svg { width: 16px; height: 16px; }
   
   /* Features */
   .dk-footer-features {
       display: flex;
       justify-content: space-between;
       padding: 32px 0;
       border-top: 1px solid var(--dk-gray-100);
       border-bottom: 1px solid var(--dk-gray-100);
       margin-bottom: 32px;
   }
   .dk-feature-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 12px;
       font-size: 12px;
       color: var(--dk-gray-700);
   }
   .dk-feature-item img { width: 56px; height: 56px; }
   
   /* Links & Newsletter */
   .dk-footer-middle {
       display: flex;
       justify-content: space-between;
       gap: 40px;
       margin-bottom: 32px;
   }
   
   .dk-footer-links {
       display: flex;
       gap: 80px;
       flex: 1;
   }
   .dk-footer-col h4 {
       font-size: 14px;
       color: var(--dk-gray-800);
       margin-bottom: 16px;
   }
   .dk-footer-col ul li { margin-bottom: 12px; }
   .dk-footer-col ul li a {
       font-size: 13px;
       color: var(--dk-gray-500);
   }
   .dk-footer-col ul li a:hover { color: var(--dk-gray-800); }
   
   .dk-footer-newsletter-section {
       width: 350px;
   }
   .dk-socials h4, .dk-newsletter h4 {
       font-size: 14px;
       color: var(--dk-gray-800);
       margin-bottom: 16px;
   }
   .dk-social-links {
       display: flex;
       gap: 16px;
       margin-bottom: 32px;
   }
   .dk-social-links a { color: var(--dk-gray-500); }
   .dk-social-links a svg { width: 32px; height: 32px; }
   .dk-social-links a:hover { color: var(--dk-gray-800); }
   
   .dk-newsletter-form {
       display: flex;
       gap: 8px;
   }
   .dk-newsletter-form input {
       flex: 1;
       padding: 10px 12px;
       background: var(--dk-gray-100);
       border: none;
       border-radius: 8px;
       font-size: 13px;
       outline: none;
   }
   .dk-newsletter-form button {
       padding: 0 16px;
       background: var(--dk-gray-200);
       color: var(--dk-white);
       border: none;
       border-radius: 8px;
       font-weight: 700;
       cursor: pointer;
   }
   .dk-newsletter-form input:valid ~ button {
       background: var(--dk-red);
       color: white;
   }
   
   .dk-footer-bottom {
       padding: 32px 0;
       border-top: 1px solid var(--dk-gray-100);
       text-align: center;
       font-size: 12px;
       color: var(--dk-gray-500);
       line-height: 2;
   }
   
   /* ==========================================================================
      Mobile Display (Hidden on Desktop)
      ========================================================================== */
   .dk-mobile-header { display: none; }
   .dk-mobile-bottom-nav { display: none; }
   
   /* Responsive */
   @media (max-width: 1024px) {
       .dk-header-bottom { display: none; }
       .dk-header-top { display: none; }
       
       .dk-mobile-header {
           display: block;
           background: var(--dk-surface);
           padding: 12px 16px;
           position: sticky;
           top: 0;
           z-index: var(--header-zindex);
           box-shadow: 0 1px 2px rgba(0,0,0,0.05);
       }
       .dk-mobile-top {
           display: flex;
           justify-content: center;
           margin-bottom: 12px;
       }
       .dk-mobile-search-bar {
           display: flex;
           align-items: center;
           gap: 8px;
           background: var(--dk-gray-100);
           padding: 8px 12px;
           border-radius: 8px;
           color: var(--dk-gray-500);
           font-size: 12px;
       }
       
       .dk-mobile-bottom-nav {
           display: flex;
           position: fixed;
           bottom: 0;
           left: 0;
           right: 0;
           background: var(--dk-surface);
           border-top: 1px solid var(--dk-border);
           height: 60px;
           z-index: var(--header-zindex);
       }
       .dk-bottom-nav-item {
           flex: 1;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 4px;
           color: var(--dk-gray-500);
           font-size: 10px;
           font-weight: 700;
       }
       .dk-bottom-nav-item svg { width: 24px; height: 24px; }
       .dk-bottom-nav-item.active { color: var(--dk-gray-800); }
       
       body { padding-bottom: 60px; }
       
       /* Footer Mobile */
       .dk-footer-top { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
       .dk-footer-contact { flex-direction: column; gap: 4px; }
       .dk-divider { display: none; }
       .dk-footer-features { grid-template-columns: repeat(2, 1fr); display: grid; gap: 24px; }
       .dk-footer-middle { flex-direction: column; }
       .dk-footer-links { flex-direction: column; gap: 24px; }
       .dk-footer-newsletter-section { width: 100%; }
   }