:root {
  --yk-primary: #e91e63;
  --yk-primary-dark: #c2185b;
  --yk-text: #1f1720;
  --yk-muted: #6f6874;
  --yk-bg: #ffffff;
  --yk-soft: #fff5f8;
  --yk-border: #f1d9e3;
  --yk-shadow: 0 10px 30px rgba(233, 30, 99, 0.08);
  --yk-radius: 20px;
  --yk-radius-sm: 14px;
  --yk-container: 1280px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: inherit;
  color: var(--yk-text);
  background: var(--yk-bg);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.yk-container {
  width: min(100% - 32px, var(--yk-container));
  margin-inline: auto;
}

.site-main {
  min-height: 60vh;
}

.yk-home-placeholder {
  padding: 80px 0;
}

.yk-home-placeholder h1 {
  margin: 0 0 12px;
  font-size: 36px;
}

.yk-home-placeholder p {
  margin: 0;
  color: var(--yk-muted);
  font-size: 18px;
}




@font-face {
    font-family: 'Shazde';
    src: url('assets/fonts/Shazde-Regular.woff2') format('woff2'),
         url('assets/fonts/Shazde-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Shazde';
    src: url('assets/fonts/Shazde-Bold.woff2') format('woff2'),
         url('assets/fonts/Shazde-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html, body, button, input, textarea, select {
    font-family: 'Shazde', sans-serif;
}
body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, div,
button, input, textarea, select,
label, th, td {
    font-family: 'Shazde', sans-serif;
}

/* ==================================================
   YelKids Header
   ================================================== */

:root {
  --yk-header-height: 84px;
  --yk-header-bg: #ffffff;
  --yk-header-border: #f1e8ed;
  --yk-primary-rgb: 233, 30, 99;
}

/* Prevent background scrolling while mobile menu is open */
html.yk-menu-open,
html.yk-menu-open body {
  overflow: hidden;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 8px;
  right: 8px;
  width: auto;
  height: auto;
  padding: 12px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  color: var(--yk-text);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: var(--yk-shadow);
}

.yk-site-header {
  position: relative;
  z-index: 100;
  width: 100%;
  background: var(--yk-header-bg);
  border-bottom: 1px solid var(--yk-header-border);
}

.yk-header-main {
  position: relative;
  min-height: var(--yk-header-height);
  background: #ffffff;
}

.yk-header-grid {
  min-height: var(--yk-header-height);
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(300px, 1.4fr) minmax(350px, 1fr);
  align-items: center;
  gap: 28px;
}

/* Brand */

.yk-header-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.yk-site-logo {
  display: flex;
  align-items: center;
}

.yk-site-logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.yk-site-logo .custom-logo {
  width: auto;
  max-width: 165px;
  height: 52px;
  object-fit: contain;
}

.yk-site-title {
  display: inline-flex;
  align-items: center;
  color: var(--yk-primary);
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.8px;
  white-space: nowrap;
}

/* Desktop navigation */

.yk-desktop-navigation {
  min-width: 0;
}

.yk-primary-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.yk-primary-menu li {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}

.yk-primary-menu > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 13px;
  color: var(--yk-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border-radius: 11px;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.yk-primary-menu > li > a:hover,
.yk-primary-menu > li > a:focus-visible {
  color: var(--yk-primary);
  background: var(--yk-soft);
  outline: none;
}

.yk-primary-menu > .current-menu-item > a,
.yk-primary-menu > .current-menu-ancestor > a {
  color: var(--yk-primary);
}

.yk-primary-menu > .current-menu-item > a::after,
.yk-primary-menu > .current-menu-ancestor > a::after {
  position: absolute;
  right: 13px;
  bottom: 3px;
  left: 13px;
  height: 2px;
  content: "";
  background: var(--yk-primary);
  border-radius: 99px;
}

/* Desktop submenus */

.yk-primary-menu .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: max-content;
  min-width: 190px;
  padding: 8px;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--yk-border);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(31, 23, 32, 0.1);
  transform: translateY(6px);
  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 160ms ease;
}

.yk-primary-menu li:hover > .sub-menu,
.yk-primary-menu li:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.yk-primary-menu .sub-menu a {
  display: block;
  padding: 10px 12px;
  color: var(--yk-text);
  font-size: 12px;
  border-radius: 9px;
}

.yk-primary-menu .sub-menu a:hover,
.yk-primary-menu .sub-menu a:focus-visible {
  color: var(--yk-primary);
  background: var(--yk-soft);
  outline: none;
}

/* Header actions */

.yk-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.yk-product-search {
  position: relative;
  width: min(100%, 260px);
  height: 44px;
  flex: 1 1 210px;
}

.yk-product-search-input {
  width: 100%;
  height: 100%;
  padding: 0 16px 0 47px;
  color: var(--yk-text);
  font: inherit;
  font-size: 13px;
  line-height: normal;
  background: #faf8f9;
  border: 1px solid transparent;
  border-radius: 13px;
  outline: none;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.yk-product-search-input::placeholder {
  color: #948a91;
  opacity: 1;
}

.yk-product-search-input:hover {
  background: #f8f3f5;
}

.yk-product-search-input:focus {
  background: #ffffff;
  border-color: rgba(var(--yk-primary-rgb), 0.35);
  box-shadow: 0 0 0 4px rgba(var(--yk-primary-rgb), 0.08);
}

.yk-search-submit {
  position: absolute;
  top: 50%;
  left: 7px;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: #665d63;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 9px;
  transform: translateY(-50%);
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.yk-search-submit:hover,
.yk-search-submit:focus-visible {
  color: var(--yk-primary);
  background: var(--yk-soft);
  outline: none;
}

.yk-header-icon,
.yk-mobile-menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--yk-text);
  cursor: pointer;
  background: #ffffff;
  border: 1px solid var(--yk-header-border);
  border-radius: 13px;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.yk-header-icon:hover,
.yk-header-icon:focus-visible,
.yk-mobile-menu-toggle:hover,
.yk-mobile-menu-toggle:focus-visible {
  color: var(--yk-primary);
  background: var(--yk-soft);
  border-color: rgba(var(--yk-primary-rgb), 0.2);
  outline: none;
}

.yk-header-icon:active,
.yk-mobile-menu-toggle:active {
  transform: scale(0.96);
}

.yk-cart-count {
  position: absolute;
  top: -5px;
  left: -5px;
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: var(--yk-primary);
  border: 2px solid #ffffff;
  border-radius: 99px;
}

/* Hide zero badge visually */
.yk-cart-count:empty {
  display: none;
}

.yk-mobile-menu-toggle,
.yk-mobile-search {
  display: none;
}

/* Mobile off-canvas navigation */

.yk-mobile-navigation {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}

.yk-mobile-navigation.is-open {
  visibility: visible;
  pointer-events: auto;
}

.yk-mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 14, 18, 0.48);
  opacity: 0;
  transition: opacity 220ms ease;
}

.yk-mobile-navigation.is-open .yk-mobile-menu-backdrop {
  opacity: 1;
}

.yk-mobile-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(88vw, 360px);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #ffffff;
  box-shadow: -20px 0 50px rgba(31, 23, 32, 0.14);
  transform: translateX(105%);
  overscroll-behavior: contain;
  transition: transform 240ms ease;
}

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

/* اصلاح کلی چیدمان هدر منو برای قرارگیری ستونی */
.yk-mobile-menu-header {
    display: flex !important;
    flex-direction: column !important; /* این خط باعث می‌شود همه زیر هم قرار بگیرند */
    align-items: center !important;    /* وسط‌چین کردن افقی */
    padding: 15px !important;
    position: relative !important;
}
/* تنظیمات لوگو در منو */
.yk-mobile-menu-logo {
    margin-bottom: 5px !important;
    text-align: center;
}
.yk-mobile-menu-logo img {
    max-width: 130px !important; 
    height: auto !important;
}

/* استایل خطوط جداکننده */
.yk-menu-divider {
    width: 100% !important; /* خط تمام عرض شود */
    border: 0;
    border-top: 1px solid #eee;
    margin: 10px 0 !important;
}

/* تنظیم باکس سرچ */
.yk-product-search-menu-panel {
    display: flex !important;
    width: 100% !important; /* باکس تمام عرض شود */
    margin: 5px 0 !important;
    background: #f9f9f9 !important;
    padding: 10px !important;
    border-radius: 25px !important;
    border: 1px solid #eee !important;
}

/* دکمه بستن (اگر می‌خواهی جای آن تنظیم شود) */
.yk-mobile-menu-close {
    margin-top: 10px !important;
    background: transparent !important;
    border: 1px solid #ccc !important;
    padding: 5px 15px !important;
    border-radius: 5px !important;
    cursor: pointer;
}

.yk-mobile-menu-title {
  color: var(--yk-primary);
  font-size: 23px;
  font-weight: 800;
}

.yk-mobile-menu-close {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--yk-text);
  cursor: pointer;
  background: var(--yk-soft);
  border: 0;
  border-radius: 12px;
}

.yk-mobile-menu-content {
  flex: 1;
  padding: 16px 20px;
}

.yk-mobile-menu,
.yk-mobile-menu .sub-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.yk-mobile-menu > li {
  border-bottom: 1px solid #f4edf0;
}

.yk-mobile-menu a {
  display: block;
  padding: 14px 4px;
  color: var(--yk-text);
  font-size: 15px;
  font-weight: 600;
}

.yk-mobile-menu .current-menu-item > a {
  color: var(--yk-primary);
}

.yk-mobile-menu .sub-menu {
  padding: 0 14px 10px 0;
}

.yk-mobile-menu .sub-menu a {
  padding: 10px 4px;
  color: var(--yk-muted);
  font-size: 14px;
  font-weight: 500;
}

.yk-mobile-menu-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--yk-header-border);
}

.yk-mobile-menu-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px;
  color: var(--yk-primary);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  background: var(--yk-soft);
  border-radius: 12px;
}

/* ==================================================
   Responsive header
   ================================================== */

/* ==================================================
   YelKids - Final Mobile Header Fix
   ================================================== */

@media (max-width: 900px) {
    /* ۱. آماده‌سازی کانتینر اصلی */
    .yk-header-main {
        height: 80px !important;
        position: relative !important;
        display: block !important;
    }

    .yk-header-grid {
        display: block !important; /* ابطال گرید دسکتاپ */
        position: relative !important;
        height: 100% !important;
        width: 100% !important;
    }

    /* ۲. لوگو: چسبیده به راست */
    .yk-header-brand {
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        margin: 0 !important;
    }

    .yk-site-logo .custom-logo {
        max-width: 80px !important;
        height: auto !important;
    }

    /* ۳. آیکون‌ها و همبرگر: چسبیده به چپ */
    .yk-header-actions {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        display: flex !important;
        flex-direction: row !important; /* ترتیب عادی */
        gap: 8px !important;
        width: auto !important;
        justify-content: flex-start !important;
    }
.yk-header-icon {
        display: inline-grid !important;
        place-items: center !important;
        width: 40px !important;
        height: 40px !important;
        background: #fff !important;
        border: 1px solid #f1e8ed !important;
    }

    .yk-mobile-menu-toggle {
        display: inline-flex !important; /* تغییر به فلکس برای کنترل دقیق فاصله */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important; /* اینجا فاصله را کنترل کن؛ 3 پیکسل عالی است */
        width: 40px !important;
        height: 40px !important;
        background: #fff !important;
        border: 1px solid #f1e8ed !important;
        padding: 0 !important;
    }

    .yk-menu-line {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #222 !important;
        border-radius: 10px !important;
        margin: 0 !important; /* حذف مارجین‌های احتمالی */
    }

    /* ۴. سرچ: دقیقاً در وسط و در یک خط */
    /* چون این المان در HTML شما خارج از هدر است، آن را به داخل می‌کشیم */
    .yk-mobile-search {
        display: block !important;
        position: absolute !important;
        left: 170px !important; /* فاصله از آیکون‌های سمت چپ */
        right: 100px !important; /* فاصله از لوگوی سمت راست */
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 5 !important;
    }

    .yk-mobile-search .yk-container {
        width: 100% !important;
        padding: 0 !important;
    }

    .yk-product-search-input {
        width: 100% !important;
        height: 40px !important;
        padding-right: 35px !important;
    }

    /* ۵. مخفی‌سازی موارد اضافه دسکتاپ */
    .yk-desktop-navigation, 
    .yk-header-actions .yk-product-search,
    .yk-header-actions .yk-header-icon:nth-child(1) { /* اگر آیکون تکراری بود */
        display: none !important;
    }
}



/* اصلاح تداخل آیکون‌ها برای اینکه روی هم نیفتند */
.yk-header-actions a, 
.yk-header-actions button {
    margin: 0 !important;
}

/* Respect reduced-motion user preference */

@media (prefers-reduced-motion: reduce) {
  .yk-primary-menu a,
  .yk-header-icon,
  .yk-mobile-menu-toggle,
  .yk-product-search-input,
  .yk-search-submit,
  .yk-mobile-menu-backdrop,
  .yk-mobile-menu-panel {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }
}
/* تنظیم باکس سرچ داخل منو - اصلاح شده */
.yk-product-search-menu-panel {
    display: flex !important;
    width: 100% !important;        /* عرض کامل پنل */
    max-width: 320px !important;  /* محدود کردن عرض برای جلوگیری از بزرگی */
    margin: 5px auto !important;
    background: #f9f9f9 !important;
    padding: 6px 15px !important; /* کاهش پدینگ برای ارتفاع کمتر */
    border-radius: 12px !important; /* گردی کمتر */
    border: 1px solid #eee !important;
    height: 40px !important;      /* تعیین ارتفاع ثابت برای باکس سرچ */
    align-items: center !important;
}

.yk-product-search-menu-panel .yk-product-search-input {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 5px !important;
    font-size: 14px !important;
}

/* دکمه بستن - برای ظاهر بهتر */
/* استایل دکمه بستن مدرن */
.yk-mobile-menu-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 10px auto !important; /* فاصله از سرچ */
    background: #f4f4f4 !important;
    border: none !important;
    border-radius: 50% !important; /* گرد */
    color: var(--yk-text) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.yk-mobile-menu-close:hover {
    background: var(--yk-primary) !important;
    color: #fff !important;
}


/* برای اینکه لوگو بیش از حد بزرگ نشود */
.yk-mobile-menu-logo img {
    max-width: 100px !important; 
    margin: 0 auto;
}


/* استایل خطوط جداکننده */
.yk-menu-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 10px 0;
}



/* حذف عنوان متنی اگر نمی‌خواهی نمایش داده شود */
.yk-mobile-menu-title {
    display: none !important;
}
/* اصلاح نهایی برای جلوگیری از ارث‌بری استایل دسکتاپ در منوی موبایل */
.yk-product-search-menu-panel {
    flex: none !important; /* این خط باعث می‌شود استایل flex قبلی نادیده گرفته شود */
    width: 100% !important;
    max-width: 100% !important; /* یا مثلا 300px اگر می‌خواهی کمی جمع‌تر باشد */
}









/* --- استایل ساختاری هیرو اسلایدر --- */
.yk-hero-section {
    padding: 20px 0;
}

.yk-hero-swiper {
    border-radius: 30px;
    overflow: hidden;
}

/* افزایش ارتفاع و بهبود ساختار کلی */
.yk-hero-slide {
    height: 600px; /* ارتفاع کاملاً دلباز و مدرن */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* تراز عمودی کل محتوا در وسط اسلاید */
    position: relative;
}

/* لایه نگهدارنده برای تراز کردن محتوا */
.yk-hero-content-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 100px; /* افزایش فاصله از کناره‌ها برای تمرکز بیشتر محتوا */
    display: flex;
}

/* برای اینکه در حالت RTL (فارسی) متن اسلاید به سمت چپ مانیتور منتقل شود و روی صورت بچه‌ها نیفتد */
body.rtl .yk-hero-content-wrapper {
    justify-content: flex-end; 
}

.yk-hero-content {
    max-width: 550px;
    text-align: right;
    display: flex;
    flex-direction: column;
    /* ایجاد فاصله داخلی در بالا و پایین باکس محتوا برای جلوگیری از چسبیدن به لبه‌های اسلاید */
    padding: 60px 0; 
    gap: 15px; /* فاصله بین المان‌های داخلی (تایتل، ساب‌تایتل، دکمه) */
}

.yk-hero-title {
    font-size: 30px; /* بزرگتر و خواناتر */
    font-weight: 800;
    line-height: 1.3; /* فاصله بین خطی استاندارد */
    color: #333;
    margin: 0;
}

.yk-hero-title-accent {
    font-size: 30px;
    font-weight: 900;
    color: #e91e63;
    margin-bottom: 5px;
}

.yk-hero-subtitle {
    font-size: 22px;
    color: #555;
    margin: 10px 0 40px; /* ایجاد فاصله دلباز بین متن و دکمه‌ها */
    line-height: 1.7;
}

/* --- استایل دکمه‌های Glassmorphism --- */
.yk-hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 10px; /* فاصله از متن بالایی */
}

.yk-btn-glass {
    padding: 18px 36px; /* دکمه‌های بزرگتر و لوکس‌تر */
    border-radius: 18px;
    font-size: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* سایه نرم برای عمق دادن */
}

/* دکمه صورتی شیشه‌ای */
.yk-btn-primary {
    background: rgba(233, 30, 99, 0.9);
    color: #fff !important;
    box-shadow: 0 8px 25px rgba(233, 30, 99, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.yk-btn-primary:hover {
    background: #e91e63;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(233, 30, 99, 0.4);
    color: #fff !important;
}

/* دکمه سفید شیشه‌ای */
.yk-btn-secondary {
    background: rgba(255, 255, 255, 0.6);
    color: #e91e63 !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.yk-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-3px);
    color: #c2185b !important;
}

/* دایره‌های پیمایش اسلایدر (Pagination) */
.yk-hero-pagination {
    bottom: 25px !important;
}

.yk-hero-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    opacity: 1;
}

.yk-hero-swiper .swiper-pagination-bullet-active {
    width: 30px;
    border-radius: 10px;
    background: #e91e63 !important;
}








/* استایل پایه دکمه‌های شیشه‌ای */
.yk-btn-glass {
    padding: 18px 36px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* انیمیشن نرم و کمی ارتجاعی */
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* افکت حرکت به بالا هنگام هاور */
.yk-btn-glass:hover {
    transform: translateY(-8px); /* حرکت به سمت بالا */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* افزایش سایه برای حس ارتفاع گرفتن */
}

/* دکمه صورتی (اصلی) */
.yk-btn-primary {
    background: rgba(233, 30, 99, 0.9);
    color: #fff;
}

.yk-btn-primary:hover {
    background: rgba(233, 30, 99, 1);
    color: #fff;
}

/* دکمه سفید (ثانویه) */
.yk-btn-secondary {
    background: rgba(255, 255, 255, 0.7);
    color: #e91e63;
}

.yk-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #c2185b;
}

/* اضافه کردن یک درخشش ملایم هنگام هاور (اختیاری) */
.yk-btn-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.yk-btn-glass:hover::after {
    left: 100%;
}
/* انیمیشن برای محتوای داخل اسلاید فعال */
.swiper-slide-active .yk-hero-title,
.swiper-slide-active .yk-hero-title-accent,
.swiper-slide-active .yk-hero-subtitle {
    animation: fadeInUp 1s ease forwards;
}

.swiper-slide-active .yk-hero-buttons {
    animation: fadeInUp 1.2s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ریسپانسیو اختصاصی موبایل */
@media (max-width: 768px) {
    .yk-hero-slide {
        height: 470px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        position: relative;
    }

    .yk-hero-content-wrapper {
        width: 100%;
        height: 100%;
        padding: 18px 16px 28px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        z-index: 2;
    }

    .yk-hero-content {
        max-width: 58%;
        background: transparent !important;
        padding: 0;
        margin: 0;
        text-align: left;
        direction: rtl;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        position: relative;
        z-index: 3;
    }

    .yk-hero-title {
        font-size: 15px;
        line-height: 1.4;
        margin: 0;
    }

    .yk-hero-title-accent {
        font-size: 17px;
        line-height: 1.35;
        margin: 0;
    }

    .yk-hero-subtitle {
        font-size: 11px;
        line-height: 1.6;
        margin: 2px 0 10px;
    }

     .yk-hero-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin-top: 8px;
        margin-bottom: 10px;
    }

    .yk-btn-glass {
        width: auto;
        min-width: 0;
        padding: 8px 10px;
        font-size: 7px;
        line-height: 1.2;
        border-radius: 10px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

     .yk-hero-pagination {
        bottom: 14px !important;
    }

    .yk-hero-swiper .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
    }

    .yk-hero-swiper .swiper-pagination-bullet-active {
        width: 20px;
    }
}








.yk-features-section {
    padding: 20px 0;
    background-color: transparent; /* تغییر به حالت شفاف برای نمایش کادر داخلی */
    margin-top: -30px; /* کمی روی هیرو می‌آید تا حالت هم‌پوشانی طرح را حفظ کند */
    position: relative;
    z-index: 10;
}

.yk-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    direction: rtl;
    background-color: #fff; /* بک‌گراند کادر */
    padding: 0 !important;
    border-radius: 20px; /* گوشه‌های گرد مشابه تصویر */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* سایه بسیار ملایم برای عمق دادن */
    border: 1px solid rgba(0, 0, 0, 0.03); /* خط بسیار نازک دور کادر */
    margin: 30px 0 !important;
}

.yk-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
}

/* آیکون‌ها در طرح دایره‌ای ساده هستند */
.yk-feature-icon {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border: 1px solid #fce4ec; /* رنگ صورتی بسیار ملایم دور ایکون */
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e91e63; /* رنگ اصلی برند شما */
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}
.yk-feature-item:hover .yk-feature-icon {
    transform: scale(1.1);
    background-color: #fce4ec;
}
.yk-feature-info h3 {
    font-size: 14px; /* کمی کوچک‌تر برای هماهنگی با کادر */
    font-weight: 700;
    color: #333;
    margin: 0 0 4px 0;
}

.yk-feature-info p {
    font-size: 12px;
    color: #999;
    margin: 0;
}

/* بهینه‌سازی ریسپانسیو برای کادر */
@media (max-width: 992px) {
    .yk-features-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 15px; /* ایجاد فاصله از لبه‌های گوشی */
    }
}

@media (max-width: 480px) {
    .yk-features-grid {
        grid-template-columns: repeat(4, 1fr); /* در موبایل ۲ در ۲ باشد که شیک‌تر شود */
        gap: 0px;
        padding: 20px 10px;
    }
    .yk-feature-item {
        padding: 5px;
    }
    .yk-feature-icon {
        width: 35px;
        height: 35px;
    }
    .yk-feature-info h3 {
    font-size: 9px; /* کمی کوچک‌تر برای هماهنگی با کادر */
    font-weight: 700;
    color: #333;
    margin: 0 0 4px 0;
    line-height: 25px;
}
.yk-feature-info p {
    font-size: 7px;
    color: #222222;
    margin: 0;
}
}














.yk-categories-section {
    position: relative;
    width: 100%; /* سکشن باید تمام عرض باشد */
    padding: 10px 0 60px;
    margin-top: 5px; /* ایجاد کمی فاصله از سکشن بالایی */
}
.yk-categories-section .yk-container {
    background: linear-gradient(180deg, #fffafc 0%, #ffffff 100%);
    border: 1px solid rgba(233, 184, 199, 0.22);
    border-radius: 28px;
    padding: 40px 20px; /* فاصله داخلی کادر */
    box-shadow: 0 18px 40px rgba(229, 185, 198, 0.10);
    overflow: hidden;
    position: relative;
    z-index: 1;
}


.yk-categories-section::before,
.yk-categories-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(244, 196, 208, 0.10);
    filter: blur(10px);
    z-index: 0;
    pointer-events: none;
}

.yk-categories-section::before {
    width: 180px;
    height: 180px;
    top: -40px;
    right: -50px;
}

.yk-categories-section::after {
    width: 140px;
    height: 140px;
    bottom: -40px;
    left: -40px;
}



.yk-section-heading {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 28px;
}

.yk-section-subtitle {
    display: inline-block;
    margin-bottom: 10px;
    padding: 7px 16px;
    background: rgba(255, 226, 235, 0.8);
    color: #d86f93;
    border: 1px dashed rgba(216, 111, 147, 0.28);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.yk-section-title {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 800;
    color: #5c3a46;
    line-height: 1.65;
}

.yk-section-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #8a6b75;
}

.yk-categories-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.yk-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    min-height: 170px;
    padding: 18px 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px dashed rgba(232, 176, 194, 0.45);
    border-radius: 24px;
    box-shadow: 0 10px 22px rgba(229, 185, 198, 0.10);
    transition: all 0.28s ease;
    position: relative;
}

.yk-category-card:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 0 18px 38px rgba(229, 185, 198, 0.24);
    border-color: rgba(216, 111, 147, 0.38);
    background: #fffdfd;
}

.yk-category-icon {
    width: 88px;
    height: 88px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff7fa 0%, #ffeef4 100%);
    border: 2px solid rgba(243, 201, 214, 0.75);
    box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.9);
    transition: all 0.28s ease;
    flex-shrink: 0;
}

.yk-category-card:hover .yk-category-icon {
    transform: scale(1.06);
}

.yk-category-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
}

.yk-category-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #6b4b57;
    line-height: 1.7;
}

@media (max-width: 1199px) {
    .yk-categories-section .yk-container {
        width: calc(100% - 32px); /* هماهنگ با استایل کانتینر اصلی قالب در موبایل */
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .yk-categories-section {
        padding: 42px 0 48px;
        border-radius: 22px;
        width: min(100%, calc(100% - 16px));
    }

    .yk-section-heading {
        margin-bottom: 22px;
    }

    .yk-section-title {
        font-size: 24px;
    }

    .yk-section-desc {
        font-size: 14px;
    }

    .yk-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .yk-category-card {
        min-height: 150px;
        padding: 16px 12px;
        border-radius: 20px;
    }

    .yk-category-icon {
        width: 78px;
        height: 78px;
        margin-bottom: 10px;
    }

    .yk-category-icon img {
        width: 48px;
        height: 48px;
    }

    .yk-category-card h3 {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .yk-categories-section {
        width: calc(100% - 12px);
    }

    .yk-categories-grid {
        grid-template-columns: 1fr;
    }
}













.yk-banner-section {
    position: relative;
    width: min(100% - 32px, 1280px);
    min-height: 420px;
    margin: 0 auto 32px;
    border-radius: 30px;
    overflow: hidden;
    background-image: url('/wp-content/themes/yelkids-theme/assets/images/banner/home-banner-bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* overlay خیلی ملایم */
.yk-banner-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.10) 38%,
            rgba(255,255,255,0.00) 62%);
    z-index: 1;
    pointer-events: none;
}

.yk-banner-content {
    position: relative;
    z-index: 2;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px;
}

.yk-banner-textbox {
    width: min(100%, 520px);
    text-align: center; /* وسط چین واقعی */
    margin-inline: auto;
}

.yk-banner-label {
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
    color: #6f6369;
}

.yk-banner-title {
    margin: 0;
    font-size: clamp(34px, 4.5vw, 30px);
    line-height: 1.80;
    font-weight: 900;
    color: #e11d74;
}

.yk-banner-text {
    margin: 12px 0 0;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 500;
    color: #5f565b;
}

.yk-banner-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.yk-banner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 158px;
    height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: #ffffff;
    color: #e11d74;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(225, 29, 116, 0.12);
    cursor: default;
}

.yk-banner-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 158px;
    height: 48px;
    padding: 0 22px;
    border: 2px solid #e11d74;
    background: rgba(255,255,255,0.72);
    color: #e11d74;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.yk-banner-btn-outline:hover {
    background: #e11d74;
    color: #ffffff;
    transform: translateY(-2px);
}

/* دکمه مشاهده همه بالا-چپ */
.yk-banner-view-all {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    color: #e11d74;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
}

.yk-banner-view-all:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

/* موبایل */
@media (max-width: 768px) {
    .yk-banner-section {
        min-height: 340px;
        border-radius: 24px;
        
    }

    .yk-banner-content {
        min-height: 340px;
        padding: 28px 18px;
    }

    .yk-banner-textbox {
        width: 100%;
        max-width: 420px;
    }

    .yk-banner-label {
        font-size: 14px;
    }

    .yk-banner-title {
        font-size: clamp(18px, 3vw, 42px);
    }

    .yk-banner-text {
        font-size: 14px;
    }

    .yk-banner-actions {
        gap: 10px;
    }

    .yk-banner-badge,
    .yk-banner-btn-outline {
        width: 100%;
        max-width: 220px;
    }

    .yk-banner-view-all {
        top: 12px;
        left: 12px;
        height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }
}













.yk-login-price-link,
.yk-login-to-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #d81b60;
    border-radius: 10px;
    color: #d81b60;
    background: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 11px;
}

.yk-pack-count-single {
    margin: 14px 0;
    font-size: 15px;
    font-weight: 600;
    color: #444;
}

.yk-pack-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #d81b60;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}











.yk-products-card-wrapper {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 24px;
    position: relative;
}

/* هدر و تب ها */
.yk-products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f7f7f7;
    margin-bottom: 25px;
}
.yk-product-tabs { display: flex; gap: 30px; position: relative; top: 1px; }
.yk-tab-btn {
    border: none; background: none; font-size: 15px; font-weight: 700; color: #888;
    cursor: pointer; padding-bottom: 12px; border-bottom: 3px solid transparent;
}
.yk-tab-btn.active { color: #d81b60; border-bottom-color: #d81b60; }

/* اسلایدر */
.yk-products-panel { display: none; }
.yk-products-panel.active { display: block; }

.yk-swiper-products {
    padding: 10px 5px 30px;
    position: relative;
}

.yk-product-item a { text-decoration: none; color: inherit; display: block; }
.yk-item-thumb {
    position: relative; background: #f9f9f9; border-radius: 15px;
    overflow: hidden; margin-bottom: 12px;
}
.yk-item-thumb img { width: 100%; height: auto; aspect-ratio: 1/1.2; object-fit: cover; }

/* فلش های اسلایدر - شخصی سازی شده */
.yk-swiper-products .swiper-button-next,
.yk-swiper-products .swiper-button-prev {
    width: 35px; height: 35px; background: #fff; border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1); color: #d81b60;
}
.yk-swiper-products .swiper-button-next::after,
.yk-swiper-products .swiper-button-prev::after { font-size: 14px; font-weight: bold; }

/* دکمه پایین */
.yk-products-footer { display: flex; justify-content: center; margin-top: 20px; }
.yk-btn-main-more {
    display: flex; align-items: center; gap: 10px; border: 1.5px solid #d81b60;
    color: #d81b60; text-decoration: none; padding: 10px 35px; border-radius: 12px;
    font-weight: 800;
}















/* View all links */
.yk-view-all-link,
.yk-btn-main-more {
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0;
}

/* Top view all: stronger, more visible */
.yk-view-all-link {
    color: #111;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.yk-view-all-link span {
    display: inline-flex;
    transform: translateY(1px);
    font-size: 18px;
    line-height: 1;
    direction: ltr;
}

/* Bottom button */
.yk-btn-main-more {
    gap: 8px;
    padding-inline: 28px;
}

.yk-btn-main-more span {
    display: inline-flex;
    font-size: 18px;
    line-height: 1;
    direction: ltr;
}

/* Force arrows to sit on the left and point outward for RTL */
html[dir="rtl"] .yk-view-all-link,
html[dir="rtl"] .yk-btn-main-more {
    direction: rtl;
}

html[dir="rtl"] .yk-view-all-link span,
html[dir="rtl"] .yk-btn-main-more span {
    order: -1;
    transform: translateY(1px) rotate(180deg);
}

/* Swiper arrows */
.yk-swiper-products .swiper-button-prev,
.yk-swiper-products .swiper-button-next {
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    color: #d81b60;
}

.yk-swiper-products .swiper-button-prev {
    left: -12px;
}

.yk-swiper-products .swiper-button-next {
    right: -12px;
}

html[dir="rtl"] .yk-swiper-products .swiper-button-prev {
    left: auto;
    right: -12px;
}

html[dir="rtl"] .yk-swiper-products .swiper-button-next {
    right: auto;
    left: -12px;
}

.yk-swiper-products .swiper-button-prev::after,
.yk-swiper-products .swiper-button-next::after {
    font-size: 14px;
    font-weight: 900;
}

/* Modern product card */
.yk-product-item {
    background: #fff;
    border: 1px solid #f3f3f3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    height: 100%;
}

.yk-product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(17, 17, 17, 0.08);
    border-color: #ebebeb;
}

.yk-product-item a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.yk-item-thumb {
    position: relative;
    background: linear-gradient(180deg, #fbfbfb 0%, #f4f4f4 100%);
    aspect-ratio: 1 / 1.18;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
}

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

.yk-product-item:hover .yk-item-thumb img {
    transform: scale(1.03);
}

.yk-item-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: #d81b60;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(216, 27, 96, 0.22);
}

.yk-badge-best {
    background: #2f8f5b;
    box-shadow: 0 4px 12px rgba(47, 143, 91, 0.22);
}

.yk-item-wishlist {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    backdrop-filter: blur(6px);
}

/* Text block separation */
.yk-product-item a > .yk-item-title,
.yk-product-item a > .yk-item-sku,
.yk-product-item a > .yk-item-price {
    padding-inline: 14px;
}

.yk-item-title {
    margin: 12px 0 6px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.65;
    color: #222;
    min-height: 46px;
}

.yk-item-sku {
    margin: 0 0 10px;
    font-size: 12px;
    color: #9a9a9a;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ededed;
}

.yk-item-price {
    margin-top: auto;
    padding-top: 12px;
    padding-bottom: 14px;
    font-size: 15px;
    font-weight: 900;
    color: #d81b60;
}

.yk-item-price .woocommerce-Price-amount,
.yk-item-price ins,
.yk-item-price del {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .yk-swiper-products .swiper-button-prev {
        left: -6px;
    }

    .yk-swiper-products .swiper-button-next {
        right: -6px;
    }

    html[dir="rtl"] .yk-swiper-products .swiper-button-prev {
        right: -6px;
    }

    html[dir="rtl"] .yk-swiper-products .swiper-button-next {
        left: -6px;
    }

    .yk-item-title {
        min-height: auto;
        font-size: 13px;
    }
}
.yk-item-sku {
    margin: 0 0 10px;
    font-size: 12px;
    color: #9a9a9a;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ededed;
}

.yk-item-sku-label {
    color: #666;
    font-weight: 600;
    margin-left: 6px;
}

.yk-item-sku-value {
    color: #9a9a9a;
}
/* === Product section action links/buttons === */

/* Common base */
.yk-view-all-link,
.yk-btn-main-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

/* Arrow should be on the LEFT in RTL and point outward */
html[dir="rtl"] .yk-view-all-link,
html[dir="rtl"] .yk-btn-main-more {
    direction: ltr;
}

.yk-view-all-link span:first-child,
.yk-btn-main-more span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 18px;
    color: #e91e63; /* red */
    transition: transform 0.25s ease, color 0.25s ease;
}

/* Keep arrow visually on the left in RTL */
html[dir="rtl"] .yk-view-all-link span:first-child,
html[dir="rtl"] .yk-btn-main-more span:first-child {
    order: -1;
}

/* Top "مشاهده همه" */
.yk-view-all-link {
    color: #e91e63;
    font-size: 15px;
}

.yk-view-all-link:hover {
    color: #c2185b;
}

.yk-view-all-link:hover span:first-child {
    transform: translateX(-3px);
    color: #c2185b;
}

/* Bottom "مشاهده همه محصولات" button */
.yk-btn-main-more {
    padding: 11px 26px;
    border: 1.5px solid #e91e63;
    border-radius: 999px;
    background: #fff;
    color: #e91e63;
    box-shadow: 0 8px 18px rgba(233, 30, 99, 0.08);
}

.yk-btn-main-more:hover {
    background: #e91e63;
    color: #fff;
    border-color: #e91e63;
    box-shadow: 0 12px 26px rgba(233, 30, 99, 0.18);
    transform: translateY(-1px);
}

.yk-btn-main-more:hover span:first-child {
    color: #fff;
    transform: translateX(-4px);
}

/* === SKU label === */
.yk-item-sku {
    margin: 0 0 10px;
    font-size: 12px;
    color: #8a8a8a;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ededed;
}

.yk-item-sku-label {
    color: #666;
    font-weight: 700;
    margin-left: 6px;
}

.yk-item-sku-value {
    color: #8a8a8a;
}

/* === Swiper arrows for product slider === */
.yk-swiper-products .swiper-button-prev,
.yk-swiper-products .swiper-button-next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background: #fff;
    border: 1px solid #f4c4d3;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.10);
    color: #e91e63;
    transition: all 0.25s ease;
}

.yk-swiper-products .swiper-button-prev:hover,
.yk-swiper-products .swiper-button-next:hover {
    background: #e91e63;
    border-color: #e91e63;
    color: #fff;
    box-shadow: 0 12px 24px rgba(233, 30, 99, 0.18);
}

/* Default positions */
.yk-swiper-products .swiper-button-prev {
    left: -12px;
    right: auto;
}

.yk-swiper-products .swiper-button-next {
    right: -12px;
    left: auto;
}

/* RTL swap */
html[dir="rtl"] .yk-swiper-products .swiper-button-prev {
    left: auto;
    right: -12px;
}

html[dir="rtl"] .yk-swiper-products .swiper-button-next {
    right: auto;
    left: -12px;
}

/* Swiper icon size and color */
.yk-swiper-products .swiper-button-prev::after,
.yk-swiper-products .swiper-button-next::after {
    font-size: 14px;
    font-weight: 900;
    color: inherit;
}

/* Optional: if arrows are inline SVG/font icons, force red */
.yk-swiper-products .swiper-button-prev svg,
.yk-swiper-products .swiper-button-next svg {
    fill: #e91e63;
}


.yk-item-details {
    padding: 0 14px;
    margin-bottom: 10px;
}

.yk-item-sku, 
.yk-item-pack {
    display: flex;
    justify-content: b-between; /* یا align-items: center */
    font-size: 12px;
    line-height: 22px;
    border-bottom: 1px dashed #ededed;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

/* برای اینکه مورد آخر خط نداشته باشد */
.yk-item-pack {
    border-bottom: none; 
    margin-bottom: 0;
}

.yk-item-sku-label,
.yk-item-pack-label {
    color: #666;
    font-weight: 700;
    margin-left: 6px;
    font-size: 10px;
}

.yk-item-sku-value,
.yk-item-pack-value {
    color: #8a8a8a;
    margin-right: auto; /* مقدار را به سمت چپ هل می‌دهد */
}

/* اصلاح قیمت برای چسبیدن به پایین در کارت‌های نامتقارن */
.yk-item-price {
    margin-top: auto;
    padding: 12px 14px 16px;
    border-top: 1px solid #f9f9f9;
}










/* =========================================
   1. استایل کانتینر اصلی (باکس دور سکشن و پس‌زمینه)
   ========================================= */
.yk-why-section {
    background-color: #fffafb;
    background-image: linear-gradient(180deg, #fffafc 0%, #ffffff 100%);
    border: 2px solid #fce4ec;
    border-radius: 40px;
    box-shadow: 0 18px 40px rgba(229, 185, 198, 0.10);
    position: relative;
    max-width: 1300px;
    width: 96%;
    padding: 40px 20px 60px;
    margin: 40px auto;
    overflow: hidden;
}

.yk-why-section .yk-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 100%; 
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

/* =========================================
   2. استایل عنوان (تایتل مشکی و صورتی + قلب)
   ========================================= */
.yk-title-wrapper {
  text-align: center;
  margin-bottom: 40px;
}

.yk-main-title {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 15px;
}

.yk-main-title .text-black {
  color: #333333;
}

.yk-main-title .text-pink {
  color: #e91e63;
}

.yk-title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.yk-title-divider .divider-line {
  height: 2px;
  width: 40px;
  background-color: #f8bbd0;
  border-radius: 2px;
}

.yk-title-divider .divider-heart {
  color: #e91e63;
  font-size: 18px;
}

/* =========================================
   3. ساختار شبکه ای کارت ها (گرید)
   ========================================= */
.yk-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  width: 100%;
}

/* =========================================
   4. تنظیمات اصلی کارت (دسکتاپ)
   ========================================= */
.yk-why-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 47, 137, 0.06);
  overflow: hidden;
  position: relative;
  height: 340px;
  transition: all 0.4s ease;
}

.yk-why-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, #ffb1d2 0%, #ff4f9d 100%);
  z-index: 10;
}

.yk-why-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  padding: 0;
  z-index: 2;
}

/* المان ها در حالت بسته (دسکتاپ) */
.yk-why-icon {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,47,137,.14) 0%, rgba(255,47,137,.08) 65%, rgba(255,255,255,0) 66%);
  display: grid;
  place-items: center;
  transition: all 0.4s ease;
}

.yk-why-icon::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: rgba(255, 175, 210, 0.18);
  transition: all 0.4s ease;
}

.yk-why-icon svg {
  width: 56px;
  height: 56px;
  stroke: #333;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
}

.yk-why-card-title {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #c2185b;
  text-align: center;
  transition: all 0.4s ease;
}

.yk-why-more {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff2f89;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.yk-why-more::before {
  content: "+";
  font-size: 14px;
}

.yk-why-content {
  position: absolute;
  top: 90px;
  left: 18px;
  right: 18px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 1;
}

.yk-why-content p {
  margin: 0;
  color: #000000;
  font-size: 11px;
  line-height: 1.8;
  text-align: right;
}

/* =========================================
   5. استایل‌های حالت باز شده (.is-open) - دسکتاپ
   ========================================= */
.yk-why-card.is-open .yk-why-icon {
  top: 15px;
  left: 15px;
  transform: translate(0, 0);
  width: 55px;
  height: 55px;
}
.yk-why-card.is-open .yk-why-icon::before {
  inset: 5px;
}
.yk-why-card.is-open .yk-why-icon svg {
  width: 28px;
  height: 28px;
}
.yk-why-card.is-open .yk-why-card-title {
  top: 30px;
  right: 18px;
  left: auto;
  transform: translate(0, 0);
  width: calc(100% - 90px);
  text-align: right;
}
.yk-why-card.is-open .yk-why-more {
  opacity: 0;
  visibility: hidden;
}
.yk-why-card.is-open .yk-why-content {
  opacity: 1;
  visibility: visible;
  top: 100px;
}

/* =========================================
   6. ریسپانسیو
   ========================================= */

/* تبلت */
@media (max-width: 991px) and (min-width: 769px) {
  .yk-why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .yk-why-card:nth-child(4) {
    grid-column: 1 / span 2;
  }
  .yk-why-card:nth-child(5) {
    grid-column: 3 / span 1;
  }
  .yk-why-card {
    height: 280px;
  }
  .yk-why-icon {
    width: 72px;
    height: 72px;
  }
  .yk-why-icon svg {
    width: 34px;
    height: 34px;
  }
  .yk-why-card-title {
    font-size: 14px;
  }
}

/* موبایل (نمایش زیر هم، باز شده کامل و رفع تداخلات) */
/* موبایل (دقیقاً مطابق اسکرین‌شات ارسالی شما) */
/* تنظیمات موبایل - دقیقا مشابه دسکتاپ (۳ تا بالا، ۲ تا پایین) */
/* موبایل (دقیقاً مطابق اسکرین‌شات ۱۰۰ - ۳ کارت بالا، ۲ کارت پایین و کاملا باز) */
@media (max-width: 768px) {
  .yk-why-section {
    padding: 24px 10px 28px;
    border-radius: 18px;
    width: 96%;
    margin: 24px auto;
  }

  .yk-title-wrapper {
    margin-bottom: 22px;
  }

  .yk-main-title {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .yk-title-divider {
    gap: 8px;
  }

  .yk-title-divider .divider-line {
    width: 28px;
  }

  .yk-title-divider .divider-heart {
    font-size: 15px;
  }

  .yk-why-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px 8px;
    align-items: stretch;
  }

  .yk-why-card {
    grid-column: span 2;
    height: auto;
    min-height: 262px;
    border-radius: 14px;
    padding: 16px 10px 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
  }

  .yk-why-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .yk-why-card:nth-child(5) {
    grid-column: 4 / span 2;
  }

  .yk-why-card::after {
    height: 4px;
  }

  .yk-why-toggle {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 0;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .yk-why-icon {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 78px;
    height: 78px;
    margin: 0 auto 10px;
    flex: 0 0 auto;
  }

  .yk-why-icon::before {
    inset: 10px;
  }

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

  .yk-why-card-title {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
  }

  .yk-why-more {
    display: none;
  }

  .yk-why-content {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    opacity: 1;
    visibility: visible;
    margin-top: 0;
    padding: 0 4px;
  }

  .yk-why-content p {
    margin: 0;
    font-size: 11px;
    line-height: 1.9;
    text-align: center;
    color: #222;
  }

  .yk-why-card.is-open {
    transform: none;
  }
}











/* ظرف کلی برای ایجاد فاصله از لبه‌های سایت */
.yk-cta-wrapper {
  padding: 60px 0;
  direction: ltr; /* برای چپ‌چین بودن تصویر */
}

.yk-container {
  max-width: 1200px; /* هم‌عرض با سایر سکشن‌های سایت شما */
  margin: 0 auto;
  padding: 0 20px;
}

/* کارت اصلی: اینجا جادو اتفاق می‌افتد */
.yk-cta-main-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  border-radius: 40px; /* ردیوس مشابه نمونه */
  overflow: hidden;
  position: relative;
  
  /* بک‌گراند یکپارچه مورب برای کل سکشن (بدون شکستگی) */
  background: 
    linear-gradient(135deg, rgba(255,255,255,0.4) 25%, transparent 25%), 
    linear-gradient(225deg, rgba(255,255,255,0.4) 25%, transparent 25%), 
    linear-gradient(45deg, rgba(255,255,255,0.4) 25%, transparent 25%), 
    linear-gradient(315deg, rgba(255,255,255,0.4) 25%, #fff1f6 25%);
  background-position: 40px 0, 40px 0, 0 0, 0 0;
  background-size: 80px 80px;
  background-repeat: repeat;
  background-color: #fff1f6; /* رنگ پایه صورتی خیلی ملایم */
  
  box-shadow: 0 25px 50px -12px rgba(239, 79, 143, 0.1);
}

/* بخش تصویر */
.yk-cta-visual {
  padding: 40px;
  display: flex;
  justify-content: center;
}

.yk-cta-visual img {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
  /* ایجاد هاله‌ی نرم پشت سبد مشابه نمونه */
  filter: drop-shadow(0 20px 30px rgba(239, 79, 143, 0.2));
}

/* بخش محتوا */
.yk-cta-content {
  padding: 40px;
  direction: rtl; 
  display: flex;
  flex-direction: column;
  align-items: center;    /* تراز افقی تمام المان‌ها در وسط */
  justify-content: center; /* تراز عمودی در مرکز */
  text-align: center;      /* وسط‌چین کردن متن‌های چندخطی */
}

.yk-cta-text-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yk-cta-text-box h2 {
  font-size: 26px;
  line-height: 2.5;
  font-weight: 800;
  color: #333;
  margin-bottom: 0; /* فاصله را جداکننده مدیریت می‌کند */
}

.yk-cta-text-box h2 span {
  display: block;
  color: #ef4f8f;
}

/* جداکننده با قلب */
.yk-cta-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 20px 0; /* کمی فاصله کمتر برای نزدیکی بیشتر به متن و دکمه */
  width: 100%;
  max-width: 300px;
}

.yk-cta-divider span {
  flex: 1;
  height: 1px;
  /* استفاده از رنگ ثابت به جای گرادینت برای وضوح بیشتر */
  background-color: #ef4f8f; 
  opacity: 0.4; /* شفافیت ملایم برای اینکه خیلی تو چشم نباشد */
}

.yk-cta-divider i, 
.yk-cta-divider .heart-icon {
  color: #ef4f8f;
  font-style: normal;
  font-size: 16px; /* سایز قلب کمی ظریف‌تر مطابق نمونه */
  display: flex;
  align-items: center;
}

/* دکمه صورتی */
.yk-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: #ef4f8f;
  color: #fff;
  padding: 14px 40px;
  border-radius: 18px; /* کمی نرم‌تر مطابق تصویر */
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
  transition: 0.3s;
  box-shadow: 0 10px 20px rgba(239, 79, 143, 0.2);
  margin-top: 10px; /* فاصله از خط جداکننده */
}

.yk-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(239, 79, 143, 0.3);
}

.btn-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
}

/* ریسپانسیو برای حالت موبایل - کنار هم ماندن المان‌ها */
@media (max-width: 767px) {
  .yk-cta-main-card {
    /* حفظ ساختار دو ستونه در موبایل */
    grid-template-columns: 0.9fr 1.1fr; 
    border-radius: 25px; /* ردیوس کمتر برای موبایل */
    margin: 0 5px;
    align-items: center;
  }
  
  .yk-cta-visual {
    padding: 15px; /* کاهش پدینگ برای فضای بیشتر */
  }

  .yk-cta-visual img {
    max-width: 100%; /* تصویر در ستون خودش فیت شود */
  }

  .yk-cta-content {
    padding: 15px 10px 15px 5px; /* پدینگ فشرده */
  }

  .yk-cta-text-box h2 {
    font-size: 14px; /* فونت کوچکتر برای جا شدن در یک خط */
    line-height: 1.4;
  }

  .yk-cta-divider {
    margin: 10px 0;
    max-width: 100px; /* کوتاه کردن خط جداکننده در موبایل */
    gap: 5px;
  }
  
  .yk-cta-divider i {
    font-size: 10px; /* قلب کوچکتر */
  }

  .yk-cta-btn {
    padding: 8px 15px; /* دکمه جمع و جورتر */
    font-size: 13px;    /* فونت دکمه موبایل */
    border-radius: 10px;
    gap: 8px;
  }

  .btn-icon {
    width: 16px; /* آیکن کوچکتر در دکمه */
    height: 16px;
  }
}

/* برای موبایل‌های خیلی کوچک (زیر 400 پیکسل) */
@media (max-width: 400px) {
  .yk-cta-text-box h2 {
    font-size: 12px;
  }
  .yk-cta-btn {
    font-size: 11px;
    padding: 6px 12px;
  }
}



/* --- [PATCH] Global Responsive Fixes --- */
html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* جلوگیری از بیرون‌زدگی تصاویر و عناصر */
img, video, iframe, embed {
    max-width: 100%;
    height: auto;
}

/* اصلاح اسکرول برای موبایل و تبلت */
@media (max-width: 1024px) {
    .container, .yk-why-grid, .yk-cta-wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }
}













/* -------------------------
     PRODUCTS
     Row 1: title right + view all left
     Row 2: two filter buttons
     ------------------------- */

  .yk-products-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "title more"
      "tabs tabs" !important;
    align-items: center !important;
    gap: 12px 10px !important;
    margin-bottom: 16px !important;
  }

  .yk-products-header h2,
  .yk-products-title {
    grid-area: title !important;
    margin: 0 !important;
    text-align: right !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .yk-products-footer
  /* دکمه پایین */
.yk-products-footer { display: flex; justify-content: center; margin-top: 20px; }
.yk-btn-main-more {
    display: flex; align-items: center; gap: 10px; border: 1.5px solid #d81b60;
    color: #d81b60; text-decoration: none; padding: 10px 35px; border-radius: 12px;
    font-weight: 800;
}

  .yk-product-tabs {
    grid-area: tabs !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .yk-tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* Hide any extra horizontal overflow behavior from earlier rules */
  .yk-product-tabs {
    overflow: visible !important;
    white-space: normal !important;
  }


@media (max-width: 768px) {
    .yk-categories-grid {
        display: flex !important;
        overflow-x: auto !important;
        gap: 15px !important;
        padding: 10px 20px !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* حذف اسکرول بار در فایرفاکس */
    }
    .yk-categories-grid::-webkit-scrollbar { display: none; } /* حذف اسکرول بار در کروم */
    
    .yk-cat-item {
        flex: 0 0 100px !important; /* عرض ثابت برای هر آیتم در اسکرول */
        scroll-snap-align: start;
    }
}




@media (max-width: 768px) {
  .yk-why-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .yk-why-card,
  .yk-why-card:nth-child(4),
  .yk-why-card:nth-child(5) {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .yk-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}














/* --- Footer Styles --- */
.yk-main-footer {
    background: #fff;
    border-top: 1px solid #f0f0f0;
    padding-top: 40px;
    margin-top: 50px;
    font-family: inherit;
    padding-right: 20px;
    padding-left: 20px;
}

.yk-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* Footer Top */
.yk-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 30px;
}
.yk-footer-socials-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yk-social-label {
    font-size: 14px;
    font-weight: 700;
    color: #444;
}

.yk-social-icons {
    display: flex;
    gap: 10px;
}

.yk-social-icons a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border-radius: 12px;
    transition: transform 0.3s ease; /* فقط حرکت */
    border: 1px solid #eee;
}

.yk-social-icons a:hover {
    transform: translateY(-5px); /* حرکت رو به بالا */
    background: #f9f9f9; /* ثابت ماندن رنگ پس‌زمینه */
}

.yk-social-icons img {
    width: 22px;
    height: 22px;
}
.yk-footer-email {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: sans-serif;
    color: #666;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.3s;
}

.yk-footer-email i {
    color: #e91e63;
    font-size: 18px;
}

.yk-footer-email:hover {
    color: #e91e63;
}

.yk-social-icons i {
    color: #555;
    font-size: 18px;
}

.yk-social-icons a:hover i {
    color: #fff;
}

/* Footer Grid */
.yk-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
    gap: 30px;
}

.yk-footer-title {
    font-size: 17px;
    font-weight: 800;
    color: #e91e63;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.yk-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 2px;
    background: #e91e63;
}

.yk-footer-text {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 12px;
}

.yk-footer-text i {
    color: #e91e63;
    margin-left: 8px;
}

.yk-footer-text a {
    color: #444;
    font-weight: 600;
}

.yk-location-btn {
    display: inline-block;
    font-size: 13px;
    color: #e91e63;
    border: 1px solid #e91e63;
    padding: 6px 15px;
    border-radius: 8px;
    margin-top: 10px;
    transition: 0.3s;
}

.yk-location-btn:hover {
    background: #e91e63;
    color: #fff;
}

.yk-footer-links {
    list-style: none;
    padding: 0;
}

.yk-footer-links li {
    margin-bottom: 10px;
}

.yk-footer-links a {
    color: #666;
    font-size: 14px;
    transition: 0.2s;
}

.yk-footer-links a:hover {
    color: #e91e63;
    padding-right: 5px;
}

/* Namad */
.yk-namad-box {
    background: #fdfdfd;
    border: 1px dashed #ddd;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

/* Footer Bottom */
.yk-footer-bottom {
    text-align: center;
    padding: 25px 0;
    border-top: 1px solid #f5f5f5;
    margin-top: 40px;
}

.yk-footer-bottom p {
    font-size: 13px;
    color: #888;
}

/* Responsive */
@media (max-width: 992px) {
    .yk-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
     .yk-footer-top {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    .yk-footer-socials-wrapper {
        align-items: center;
    }
     .yk-footer-email {
        justify-content: center;
    }
    
    .yk-footer-grid {
        grid-template-columns: 1fr;
    }
    
    .yk-footer-col {
        text-align: center;
    }
    
    .yk-footer-title::after {
        right: 50%;
        transform: translateX(50%);
    }

    .yk-social-icons {
        justify-content: center;
    }
}

@font-face {
  font-family: 'Shazde';
  src: url('/wp-content/themes/yelkids-theme/assets/fonts/Shazde-Regular.woff2') format('woff2'),
       url('/wp-content/themes/yelkids-theme/assets/fonts/Shazde-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Shazde';
  src: url('/wp-content/themes/yelkids-theme/assets/fonts/Shazde-Bold.woff2') format('woff2'),
       url('/wp-content/themes/yelkids-theme/assets/fonts/Shazde-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html, body {
  font-family: 'Shazde', sans-serif !important;
}

body * {
  font-family: inherit;
}
body, body * {
  font-family: 'Shazde', sans-serif !important;
}



html {
    font-size: 15px;
}

body {
    font-family: 'Shazde', sans-serif !important;
    font-size: 15px;
    line-height: 1.7;
}

h1 { font-size: 2.2rem; line-height: 1.25; }
h2 { font-size: 1.8rem; line-height: 1.3; }
h3 { font-size: 1.45rem; line-height: 1.35; }
h4 { font-size: 1.2rem; line-height: 1.4; }
h5 { font-size: 1.05rem; line-height: 1.45; }
h6 { font-size: 0.95rem; line-height: 1.5; }

p,
li,
a,
span,
input,
textarea,
select,
button,
label {
    font-size: 1rem;
    line-height: 1.7;
}

small {
    font-size: 0.9rem;
}

/* اگر بعضی تیترها هنوز خیلی درشت بودند */
.section-title,
.page-title,
.entry-title {
    font-size: 1.8rem;
    line-height: 1.3;
}

.yk-why-card h3,
.yk-why-card-title {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}


@media (max-width: 900px) {

  /* هدر موبایل دو ردیفه */
  .yk-header-main {
    min-height: auto !important;
    height: auto !important;
    padding: 12px 0 10px !important;
  }

  .yk-header-grid {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "actions brand menu"
      "search search search";
    align-items: center;
    gap: 10px 12px;
    min-height: auto !important;
    height: auto !important;
    padding: 0 12px !important;
  }

  /* ردیف اول */
  .yk-header-actions {
    grid-area: actions;
    position: static !important;
    transform: none !important;
    justify-content: flex-start !important;
    width: 100%;
    gap: 8px !important;
  }

  .yk-header-brand {
    grid-area: brand;
    position: static !important;
    transform: none !important;
    justify-content: center !important;
    width: 100%;
  }

  .yk-mobile-menu-toggle {
    grid-area: menu;
    display: inline-grid !important;
    justify-self: end;
  }

  /* لوگو */
  .yk-site-logo .custom-logo {
    max-width: 72px !important;
    height: auto !important;
  }

  /* آیکون‌ها */
  .yk-header-icon,
  .yk-mobile-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
  }

  /* فقط دو آیکون اول در سمت راست بمانند */
  .yk-header-actions .yk-product-search {
    display: none !important;
  }

  /* ردیف دوم سرچ */
  .yk-mobile-search {
    grid-area: search;
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .yk-mobile-search .yk-container {
    padding: 12px !important;
    width: 100% !important;
  }

  .yk-mobile-search .yk-product-search-mobile {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
  }

  .yk-mobile-search .yk-product-search-input {
    height: 44px !important;
    width: 100% !important;
    font-size: 13px !important;
    padding: 0 44px 0 14px !important;
  }

  .yk-mobile-search .yk-search-submit {
    left: 6px !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* موارد دسکتاپ */
  .yk-desktop-navigation {
    display: none !important;
  }

  /* جلوگیری از تداخل استایل‌های قبلی */
  .yk-header-actions,
  .yk-header-brand,
  .yk-mobile-search {
    z-index: 10;
  }
}








@media (max-width: 900px) {
    /* تنظیم شبکه اصلی هدر برای چیدمان سه ستونه */
    .yk-header-grid {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important; /* سه ستون مساوی در طرفین و خودکار در وسط */
        grid-template-areas: "actions brand menu" "search search search" !important;
        align-items: center;
        gap: 10px;
    }

    /* 1. آیکون‌های سمت راست (پروفایل و سبد) */
    .yk-header-actions {
        grid-area: actions;
        display: flex !important;
        justify-content: flex-start !important;
        position: static !important;
        transform: none !important;
    }

    /* 2. لوگو در وسط */
    .yk-header-brand {
        grid-area: brand;
        display: flex !important;
        justify-content: center !important;
        position: static !important;
        transform: none !important;
    }

    /* 3. منوی همبرگری در سمت چپ */
    .yk-mobile-menu-toggle {
        grid-area: menu;
        display: flex !important;
        justify-self: end !important; /* چسباندن به لبه چپ صفحه (در حالت RTL) */
        margin: 0 !important;
    }

    /* باکس جستجو در ردیف دوم */
    .yk-mobile-search {
        grid-area: search;
        width: 100% !important;
        margin-top: 5px !important;
    }
}














@media (max-width: 767px) {                                   
    .yk-categories-section {
        padding: 0;
        border-radius: 22px;
        width: min(100%, calc(100% - 16px));
        margin-bottom: 25px;
        margin-top: -20px;
    }
.yk-categories-section {
    position: relative;
    width: 100%;
    padding: 50px 0 60px;
    margin-top: 0;
}
.yk-categories-section .yk-container {
    background: #ffffff00;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.yk-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    min-height: 170px;
    padding: 18px 14px;
    background: rgb(255 255 255 / 0%);
    border: 0;
    border-radius: 0;
    box-shadow: 0;
    transition: all 0.28s ease;
    position: relative;
}
}




@media (max-width: 768px) {                           
    .yk-categories-grid {
        display: flex !important;
        overflow-x: auto !important;
        gap: 15px !important;
        padding: 0 !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
}





@media (max-width: 767px) {                              
    .yk-category-card {
        min-height: 100px;
        padding: 0px 0px;
        border-radius: 20px;
    }
}







@media (max-width: 767px) {                                
    .yk-category-icon
    {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
    }
}
@media (max-width: 767px) {
    .yk-category-card h3 {
        font-size: 10px;
    }
    .yk-category-icon img {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 767px) {
    .yk-categories-section {
        position: relative;
        width: 100%;
        padding: 0;
        margin-top: -30px;
    }
}

@media (max-width: 768px) {
.yk-banner-section {
    position: relative;
    margin: 0 auto 32px;
    border-radius: 30px;
    overflow: hidden;
    background-image: url(/wp-content/themes/yelkids-theme/assets/images/banner/home-banner-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    aspect-ratio: 3 / 1;
}
.yk-banner-section {
        min-height: 180px;
        border-radius: 24px;
    }
}
@media (max-width: 768px) {
    .yk-banner-view-all {
        top: 12px;
        left: 12px;
        height: 30px;
        padding: 0 12px;
        font-size: 8px;
    }
}
@media (max-width: 768px) {
    .yk-banner-textbox {
        width: 100%;
        max-width: 420px;
        margin-top: -160px;
    }
}
@media (max-width: 768px) {
    .yk-banner-label {
        font-size: 12px;
    }
}
@media (max-width: 768px) {
    .yk-banner-title {
        font-size: 12px;
    }
}
@media (max-width: 768px) {
    .yk-banner-text {
        font-size: 12px;
    }
    .yk-banner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #e11d74;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(225, 29, 116, 0.12);
    cursor: default;
    width: 30px !important;
}
.yk-banner-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 113px;
    height: 30px;
    padding: 0;
    border: 2px solid #e11d74;
    background: rgba(255, 255, 255, 0.72);
    color: #e11d74;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    width: 50px !important;
}
}








@media (max-width: 768px) {
  .yk-swiper-products {
    overflow: visible !important;
  }

  .yk-swiper-products .swiper-wrapper {
    padding-right: 0 !important;
  }

  .yk-swiper-products .swiper-slide {
    width: 44% !important;
  }

  .yk-products-card-wrapper {
    padding: 16px !important;
  }
}



@media (max-width: 768px) {
  .yk-products-card-wrapper {
    padding: 12px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .yk-products-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .yk-products-header h2,
  .yk-products-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  .yk-products-header a,
  .yk-view-all-link {
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .yk-product-tabs {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
  }

  .yk-tab-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    min-height: 30px !important;
  }

  .yk-swiper-products {
    padding: 6px 0 26px !important;
    overflow: hidden !important;
  }

  .yk-swiper-products .swiper-slide {
    width: 42% !important;
  }

  .yk-products-card-wrapper .card,
  .yk-products-card-wrapper .product-card {
    padding: 0 !important;
  }

  .yk-item-thumb {
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .yk-item-thumb img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  .yk-product-card-title,
  .yk-item-title,
  .product-title {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 6px 0 4px !important;
  }

  .yk-product-meta,
  .yk-item-meta,
  .product-meta {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  .yk-swiper-products .swiper-button-prev,
  .yk-swiper-products .swiper-button-next {
    width: 28px !important;
    height: 28px !important;
    top: 52% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  }

  .yk-swiper-products .swiper-button-prev {
    left: 4px !important;
  }

  .yk-swiper-products .swiper-button-next {
    right: 4px !important;
  }
}
@media (max-width: 768px) {
  .yk-swiper-products .swiper-button-prev,
  .yk-swiper-products .swiper-button-next {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .yk-products-card-wrapper {
    padding: 12px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .yk-products-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "title more"
      "tabs tabs" !important;
    align-items: center !important;
    gap: 8px 10px !important;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .yk-products-main-title,
  .yk-products-header h2,
  .yk-products-title {
    grid-area: title !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-align: right !important;
  }

  .yk-view-all-link,
  .yk-products-footer {
    grid-area: more !important;
    margin: 0 !important;
    justify-self: start !important;
    align-self: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .yk-product-tabs {
    grid-area: tabs !important;
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 0 0 6px !important;
    margin: 0 !important;
  }

  .yk-tab-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    min-height: 28px !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 768px) {
  .yk-swiper-products {
    padding: 6px 0 18px !important;
    overflow: hidden !important;
  }

  .yk-swiper-products .swiper-slide {
    width: 42% !important;
  }

  .yk-product-item {
    height: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .yk-product-item a {
    height: 100% !important;
  }

  .yk-item-thumb {
    aspect-ratio: 1 / 1 !important;
  }

  .yk-item-badge {
    top: 8px !important;
    right: 8px !important;
    font-size: 9px !important;
    padding: 3px 8px !important;
  }

  .yk-item-title {
    margin: 8px 0 4px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    min-height: 32px !important;
    padding-inline: 10px !important;
  }

  .yk-item-sku {
    font-size: 10px !important;
    margin-bottom: 6px !important;
    padding-inline: 10px !important;
  }

  .yk-item-price {
    font-size: 12px !important;
    padding: 8px 10px 10px !important;
    margin-top: auto !important;
  }

  .yk-item-details {
    font-size: 10px !important;
    line-height: 1.4 !important;
    padding-inline: 10px !important;
  }
}
@media (max-width: 768px) {
  .yk-products-footer {
    display: flex !important;
    justify-content: center !important;
    margin-top: 14px !important;
  }

  .yk-btn-main-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 12px !important;
  }
}
@media (max-width: 768px) {
  /* Tabs: exactly 2 visible, no overflow */
  .yk-product-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: hidden !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 2px 0 8px !important;
  }

  .yk-tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 7px 8px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Product card text sizes */
  .yk-item-title,
  .yk-item-sku-label,
  .yk-item-sku-value,
  .yk-item-pack,
  .yk-item-price,
  .yk-item-details {
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  .yk-item-title {
    min-height: 28px !important;
    margin: 6px 0 4px !important;
    padding-inline: 8px !important;
  }

  .yk-item-sku,
  .yk-item-pack {
    padding-inline: 8px !important;
  }

  .yk-item-price {
    padding: 8px 8px 10px !important;
  }

  /* Footer button centered */
  .yk-products-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  .yk-btn-main-more {
    margin: 0 auto !important;
    justify-self: center !important;
  }
  .yk-item-sku-label,
.yk-item-pack-label {
    color: #666;
    font-weight: 700;
    margin-left: 0px;
    font-size: 9px !important;
}
.yk-item-sku-value,
.yk-item-pack-value {
    color: #8a8a8a;
    margin-right: auto; /* مقدار را به سمت چپ هل می‌دهد */
    font-size: 9px !important;
}
.woocommerce-Price-currencySymbol
{
    font-size: 9px !important;
}
.yk-item-price .woocommerce-Price-amount, .yk-item-price ins, .yk-item-price del {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px !important;
}
}
@media (max-width: 768px) {
  /* Center price */
  .yk-item-price {
    text-align: center !important;
  }

  .yk-item-price .woocommerce-Price-amount,
  .yk-item-price ins,
  .yk-item-price del {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 4px !important;
  }

  .yk-item-price .woocommerce-Price-amount bdi {
    display: inline-block !important;
  }

  /* Remove badge from image */
  .yk-item-badge,
  .yk-badge-best {
    display: none !important;
  }
}








@media (max-width: 768px) {
  /* Taller, more rectangular product image */
  .yk-item-thumb {
    aspect-ratio: 1 / 1.35 !important;
  }

  .yk-item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Make title and details align on the same right edge */
  .yk-product-item a > .yk-item-title,
  .yk-product-item a > .yk-item-details,
  .yk-product-item a > .yk-item-sku,
  .yk-product-item a > .yk-item-price {
    padding-inline: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .yk-item-title,
  .yk-item-details {
    text-align: right !important;
    direction: rtl !important;
  }

  /* Fix metadata rows */
  .yk-item-sku,
  .yk-item-pack {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .yk-item-sku-label,
  .yk-item-pack-label {
    margin-left: 6px !important;
    white-space: nowrap !important;
  }

  .yk-item-sku-value,
  .yk-item-pack-value {
    margin-right: 0 !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 768px) {
  .yk-product-item a {
    height: 100% !important;
    font-size: 8px;
  }
}




@media (max-width: 768px) {
  .yk-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 10px 0 !important;
    scroll-snap-type: none !important;
  }

  .yk-categories-grid > *,
  .yk-categories-grid .yk-cat-item {
    width: auto !important;
    min-width: 0 !important;
    flex: initial !important;
    scroll-snap-align: none !important;
  }

  .yk-category-card {
    min-height: 140px !important;
  }
}

@media (max-width: 480px) {
  .yk-categories-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .yk-categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 8px 0 !important;
    display: grid !important;
    scroll-snap-type: none !important;
  }

  .yk-categories-grid > *,
  .yk-categories-grid .yk-cat-item {
    min-width: 0 !important;
    width: auto !important;
    flex: initial !important;
  }

  .yk-category-card {
    min-height: 110px !important;
    padding: 10px 6px !important;
    border-radius: 16px !important;
  }

  .yk-category-card .title,
  .yk-category-card h3,
  .yk-category-card p {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .yk-category-card img,
  .yk-category-card svg {
    max-width: 36px !important;
    max-height: 36px !important;
  }
}

@media (max-width: 768px) {
  .yk-categories-grid {
    display: grid !important;
    overflow-x: visible !important;
    padding: 8px 0 !important;
    scroll-snap-type: none !important;
  }

  .yk-categories-grid > *,
  .yk-categories-grid .yk-cat-item {
    min-width: 0 !important;
    width: auto !important;
    flex: initial !important;
  }
}
@media (max-width: 768px) {
  /* تنظیم ظرفیت برای قرارگیری همه در یک خط */
  .yk-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* اجبار به ۵ ستون */
    gap: 5px !important; /* حداقل فاصله */
    overflow: visible !important;
    padding: 10px 5px !important;
    scroll-snap-type: none !important;
  }

  /* حذف استایل‌های carousel که باعث عریض شدن آیتم‌ها می‌شد */
  .yk-categories-grid > *,
  .yk-categories-grid .yk-cat-item {
    min-width: 0 !important;
    width: auto !important;
    flex: initial !important;
  }

  /* کوچک کردن خود کارت‌ها برای جا شدن */
  .yk-category-card {
    min-height: 85px !important; /* ارتفاع خیلی کمتر */
    padding: 8px 2px !important; /* پدینگ حداقلی */
    border-radius: 12px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* کوچک کردن آیکون/تصویر داخل کارت */
  .yk-category-card .icon,
  .yk-category-card img,
  .yk-category-card svg {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 5px !important;
  }

  /* کوچک کردن متن برای جلوگیری از شکستن خط */
  .yk-category-card .title,
  .yk-category-card h3 {
    font-size: 10px !important;
    white-space: nowrap !important; /* جلوگیری از دو خطی شدن متن */
    letter-spacing: -0.5px;
  }
}
@media (max-width: 767px) {
  .yk-category-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 10px;
  }
}
















@media (max-width: 768px) {
  .yk-why-section {
    padding: 24px 0 28px !important;
    margin: 24px auto !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .yk-why-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 16px 12px !important;
    direction: rtl !important;
  }

  .yk-why-grid::-webkit-scrollbar {
    display: none !important;
  }

  .yk-why-card {
    flex: 0 0 72% !important;
    min-width: 72% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    scroll-snap-align: center !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
  }

  .yk-why-toggle {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 18px 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  .yk-why-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 10px !important;
    flex: 0 0 auto !important;
  }

  .yk-why-icon::before {
    inset: 8px !important;
  }

  .yk-why-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  .yk-why-card-title {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  .yk-why-more {
    display: none !important;
  }

  .yk-why-content {
    display: none !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    padding: 0 14px 16px !important;
  }

  .yk-why-card.is-open .yk-why-content {
    display: block !important;
  }

  .yk-why-content p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.9 !important;
    text-align: center !important;
    color: #222 !important;
  }

  .yk-why-card.is-open {
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .yk-why-card {
    flex-basis: 78% !important;
    min-width: 78% !important;
  }

  .yk-why-toggle {
    padding: 16px 12px 14px !important;
  }

  .yk-why-icon {
    width: 54px !important;
    height: 54px !important;
  }

  .yk-why-icon svg {
    width: 26px !important;
    height: 26px !important;
  }

  .yk-why-card-title {
    font-size: 13px !important;
  }

  .yk-why-content p {
    font-size: 10px !important;
    line-height: 1.8 !important;
  }
}





















@media (max-width: 768px) {
  .yk-why-card.is-open .yk-why-toggle {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon title"
      "content content" !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    align-items: start !important;
    text-align: right !important;
  }

  .yk-why-card.is-open .yk-why-icon {
    grid-area: icon !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }

  .yk-why-card.is-open .yk-why-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .yk-why-card.is-open .yk-why-card-title {
    grid-area: title !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    text-align: right !important;
  }

  .yk-why-card.is-open .yk-why-content {
    grid-area: content !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 6px !important;
    text-align: right !important;
  }
}

























































/* ==================================
   YelKids Shop Archive Final CSS
   فقط برای آرشیو فروشگاه
   ================================== */

body.woocommerce-shop .site-main,
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main,
body.tax-product_tag .site-main {
    padding-top: 0;
}

/* هم‌ترازی با کانتینر هدر، بدون دستکاری سراسری */
body.woocommerce-shop .yk-container,
body.post-type-archive-product .yk-container,
body.tax-product_cat .yk-container,
body.tax-product_tag .yk-container {
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
    box-sizing: border-box;
}

body.woocommerce-shop .yk-shop-content,
body.post-type-archive-product .yk-shop-content,
body.tax-product_cat .yk-shop-content,
body.tax-product_tag .yk-shop-content {
    display: block;
    width: 100%;
    margin-top: 20px;
}

body.woocommerce-shop .yk-shop-toolbar,
body.post-type-archive-product .yk-shop-toolbar,
body.tax-product_cat .yk-shop-toolbar,
body.tax-product_tag .yk-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    padding: 12px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

body.woocommerce-shop .yk-btn-filter,
body.post-type-archive-product .yk-btn-filter,
body.tax-product_cat .yk-btn-filter,
body.tax-product_tag .yk-btn-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    color: #fff;
    background: #000;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .3s ease;
}

body.woocommerce-shop .yk-btn-filter:hover,
body.post-type-archive-product .yk-btn-filter:hover,
body.tax-product_cat .yk-btn-filter:hover,
body.tax-product_tag .yk-btn-filter:hover {
    background: #333;
}

body.woocommerce-shop .yk-products-grid,
body.post-type-archive-product .yk-products-grid,
body.tax-product_cat .yk-products-grid,
body.tax-product_tag .yk-products-grid {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    direction: rtl;
    box-sizing: border-box;
}

/* فقط لیست محصولات آرشیو */
body.woocommerce-shop .yk-products-grid ul.products,
body.post-type-archive-product .yk-products-grid ul.products,
body.tax-product_cat .yk-products-grid ul.products,
body.tax-product_tag .yk-products-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: none !important;
}

body.woocommerce-shop .yk-products-grid ul.products::before,
body.woocommerce-shop .yk-products-grid ul.products::after,
body.post-type-archive-product .yk-products-grid ul.products::before,
body.post-type-archive-product .yk-products-grid ul.products::after,
body.tax-product_cat .yk-products-grid ul.products::before,
body.tax-product_cat .yk-products-grid ul.products::after,
body.tax-product_tag .yk-products-grid ul.products::before,
body.tax-product_tag .yk-products-grid ul.products::after {
    content: none !important;
    display: none !important;
}

body.woocommerce-shop .yk-products-grid ul.products li.product,
body.post-type-archive-product .yk-products-grid ul.products li.product,
body.tax-product_cat .yk-products-grid ul.products li.product,
body.tax-product_tag .yk-products-grid ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    display: block !important;
    list-style: none !important;
}

/* کارت محصول */
body.woocommerce-shop .yk-product-link,
body.post-type-archive-product .yk-product-link,
body.tax-product_cat .yk-product-link,
body.tax-product_tag .yk-product-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

body.woocommerce-shop .yk-product-item,
body.post-type-archive-product .yk-product-item,
body.tax-product_cat .yk-product-item,
body.tax-product_tag .yk-product-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

/* فقط یک نسبت تصویر: مربعی */
body.woocommerce-shop .yk-product-thumbnail,
body.post-type-archive-product .yk-product-thumbnail,
body.tax-product_cat .yk-product-thumbnail,
body.tax-product_tag .yk-product-thumbnail,
body.woocommerce-shop .yk-product-item .yk-item-thumb,
body.post-type-archive-product .yk-product-item .yk-item-thumb,
body.tax-product_cat .yk-product-item .yk-item-thumb,
body.tax-product_tag .yk-product-item .yk-item-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f7f7;
    margin-bottom: 0;
}

body.woocommerce-shop .yk-product-thumbnail img,
body.post-type-archive-product .yk-product-thumbnail img,
body.tax-product_cat .yk-product-thumbnail img,
body.tax-product_tag .yk-product-thumbnail img,
body.woocommerce-shop .yk-product-item .yk-item-thumb img,
body.post-type-archive-product .yk-product-item .yk-item-thumb img,
body.tax-product_cat .yk-product-item .yk-item-thumb img,
body.tax-product_tag .yk-product-item .yk-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}

body.woocommerce-shop .yk-product-item:hover .yk-product-thumbnail img,
body.post-type-archive-product .yk-product-item:hover .yk-product-thumbnail img,
body.tax-product_cat .yk-product-item:hover .yk-product-thumbnail img,
body.tax-product_tag .yk-product-item:hover .yk-product-thumbnail img,
body.woocommerce-shop .yk-product-item:hover .yk-item-thumb img,
body.post-type-archive-product .yk-product-item:hover .yk-item-thumb img,
body.tax-product_cat .yk-product-item:hover .yk-item-thumb img,
body.tax-product_tag .yk-product-item:hover .yk-item-thumb img {
    transform: scale(1.05);
}

body.woocommerce-shop .yk-product-info,
body.post-type-archive-product .yk-product-info,
body.tax-product_cat .yk-product-info,
body.tax-product_tag .yk-product-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    padding: 12px 10px 14px;
    text-align: center;
}

body.woocommerce-shop .yk-product-title,
body.post-type-archive-product .yk-product-title,
body.tax-product_cat .yk-product-title,
body.tax-product_tag .yk-product-title,
body.woocommerce-shop .yk-product-item .yk-item-title,
body.post-type-archive-product .yk-product-item .yk-item-title,
body.tax-product_cat .yk-product-item .yk-item-title,
body.tax-product_tag .yk-product-item .yk-item-title {
    margin: 0 !important;
    min-height: 44px;
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow: hidden;
}

body.woocommerce-shop .yk-product-meta,
body.post-type-archive-product .yk-product-meta,
body.tax-product_cat .yk-product-meta,
body.tax-product_tag .yk-product-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    color: #666;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

body.woocommerce-shop .yk-product-price,
body.post-type-archive-product .yk-product-price,
body.tax-product_cat .yk-product-price,
body.tax-product_tag .yk-product-price,
body.woocommerce-shop .yk-item-price,
body.post-type-archive-product .yk-item-price,
body.tax-product_cat .yk-item-price,
body.tax-product_tag .yk-item-price {
    margin-top: 8px;
    color: #ce1a5e;
    font-size: 14px !important;
    font-weight: 700;
    text-align: center;
}

body.woocommerce-shop .yk-product-price ins,
body.post-type-archive-product .yk-product-price ins,
body.tax-product_cat .yk-product-price ins,
body.tax-product_tag .yk-product-price ins {
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

body.woocommerce-shop .yk-product-price del,
body.post-type-archive-product .yk-product-price del,
body.tax-product_cat .yk-product-price del,
body.tax-product_tag .yk-product-price del {
    margin-left: 5px;
    font-size: 11px;
}

body.woocommerce-shop .login-for-price,
body.post-type-archive-product .login-for-price,
body.tax-product_cat .login-for-price,
body.tax-product_tag .login-for-price,
body.woocommerce-shop .yk-login-price-msg,
body.post-type-archive-product .yk-login-price-msg,
body.tax-product_cat .yk-login-price-msg,
body.tax-product_tag .yk-login-price-msg {
    color: #888;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
}

body.woocommerce-shop .yk-pack-info,
body.post-type-archive-product .yk-pack-info,
body.tax-product_cat .yk-pack-info,
body.tax-product_tag .yk-pack-info {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 10px;
    color: #ce1a5e;
    font-size: 13px;
    background: #fdf0f5;
    border-radius: 20px;
}

body.woocommerce-shop .yk-product-item .button.add_to_cart_button,
body.woocommerce-shop .yk-product-item .added_to_cart,
body.post-type-archive-product .yk-product-item .button.add_to_cart_button,
body.post-type-archive-product .yk-product-item .added_to_cart,
body.tax-product_cat .yk-product-item .button.add_to_cart_button,
body.tax-product_cat .yk-product-item .added_to_cart,
body.tax-product_tag .yk-product-item .button.add_to_cart_button,
body.tax-product_tag .yk-product-item .added_to_cart {
    display: none !important;
}

/* Drawer */
.yk-filter-drawer {
    position: fixed;
    top: 0;
    right: -350px;
    width: 320px;
    height: 100vh;
    padding: 20px;
    overflow-y: auto;
    background: #fff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, .1);
    transition: right .4s cubic-bezier(.165, .84, .44, 1);
    z-index: 9999;
}

.yk-filter-drawer.is-active {
    right: 0;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

#yk-close-filter {
    background: none;
    border: 0;
    font-size: 24px;
    cursor: pointer;
}

.yk-filter-overlay {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, .5);
    z-index: 9998;
}

.yk-filter-overlay.is-active {
    display: block;
}

@media (max-width: 768px) {
    body.woocommerce-shop .yk-container,
    body.post-type-archive-product .yk-container,
    body.tax-product_cat .yk-container,
    body.tax-product_tag .yk-container {
        width: calc(100% - 20px);
    }

    body.woocommerce-shop .yk-products-grid ul.products,
    body.post-type-archive-product .yk-products-grid ul.products,
    body.tax-product_cat .yk-products-grid ul.products,
    body.tax-product_tag .yk-products-grid ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .yk-filter-drawer {
        width: 100%;
        right: -100%;
    }
}
/* ==================================================
   YelKids - Premium Product Card Styling
   ================================================== */

/* ۱. حذف لیبل‌ها و المان‌های روی تصویر */
.yk-product-item .yk-badge,
.yk-product-item .yk-badge-new,
.yk-product-item .yith-wcwl-add-to-wishlist,
.yk-product-item .heart-icon,
.yk-product-item .yk-atw-button {
    display: none !important;
}

/* ۲. اصلاح بدنه کارت محصول */
.yk-product-item {
    background: #fff;
    border-radius: 12px; /* لبه‌های کمی تیزتر برای حس مدرن */
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.yk-product-item:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    transform: translateY(-4px);
}

/* ۳. تصویر محصول (مربعی در دسکتاپ، کنترل شده در موبایل) */
.yk-product-item .yk-item-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #fcfcfc;
    overflow: hidden;
}

.yk-product-item .yk-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ۴. بخش اطلاعات محصول */
.yk-product-info {
    padding: 15px 12px;
    text-align: center;
}

.yk-product-item .yk-item-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #222 !important;
    margin: 0 0 10px 0 !important;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* ۵. استایل ویژگی‌ها (کد کالا و تعداد) */
.yk-item-details {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.yk-item-sku, .yk-item-pack {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    padding-bottom: 4px;
    border-bottom: 1px solid #f5f5f5; /* خط ممتد و بسیار کمرنگ */
}

.yk-item-sku-value, .yk-item-pack-value {
    color: #444;
    font-weight: 600;
}

/* ۶. قیمت محصول */
.yk-item-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ce1a5e !important;
    margin-top: 5px;
}

.yk-login-price-msg {
    font-size: 11px;
    color: #999;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.2px;
}

/* ==================================================
   Mobile Refinement (زیر ۷۶۸ پیکسل)
   ================================================== */
@media (max-width: 768px) {
    /* کاهش ارتفاع تصویر در موبایل برای نمایش بهتر محصولات بیشتر */
    .yk-product-item .yk-item-thumb {
        aspect-ratio: 4 / 5; /* کمی کشیده تر اما نه خیلی بلند */
    }

    .yk-product-info {
        padding: 10px 8px;
    }

    .yk-product-item .yk-item-title {
        font-size: 13px !important;
        min-height: 38px;
        margin-bottom: 8px !important;
    }

    .yk-item-sku, .yk-item-pack {
        font-size: 10px;
    }

    .yk-item-price {
        font-size: 14px !important;
    }
}





/* ==================================================
   YELKIDS CUSTOM AJAX FILTER SYSTEM (PURE DIGISTYLE)
   ================================================== */

.woocommerce-result-count { display: none !important; }

/* Subcats */
.yk-subcategories-list .yk-subcats { display: flex; gap: 15px; list-style: none; padding: 0; margin: 0 0 30px 0; overflow-x: auto; scrollbar-width: thin; }
.yk-subcats li a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #333; font-size: 13px; font-weight: 500;}
.yk-subcats li a img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; border: 2px solid #eee;}

/* --------------------------------------------------
   DESKTOP FILTER BAR (HOVER SYSTEM)
-------------------------------------------------- */
@media (min-width: 769px) {
    .yk-hide-desktop { display: none !important; }
    .yk-shop-toolbar-wrapper { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 25px; position: relative; z-index: 100;}
    
    #yk-ajax-filter-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    
    .yk-filter-box { position: relative; display: inline-block; }
    
    .yk-filter-title {
        background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
        padding: 10px 18px; font-size: 13px; color: #333; font-weight: bold;
        cursor: pointer; display: flex; align-items: center; justify-content: space-between; 
        gap: 12px; transition: 0.2s ease; user-select: none;
    }
    .yk-filter-title .arrow { font-size: 9px; color: #888; transition: transform 0.2s; }
    
    /* Dropdown Body - Hidden by default */
    .yk-filter-dropdown {
        position: absolute; top: calc(100% + 8px); right: 0;
        background: #fff; border: 1px solid #eee; border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 280px;
        padding: 18px; z-index: 999;
        opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: all 0.2s ease;
    }

    /* پل نامرئی برای جلوگیری از بسته شدن منو هنگام حرکت موس */
    .yk-filter-dropdown::before {
        content: ''; position: absolute; top: -15px; left: 0; right: 0; height: 15px; background: transparent;
    }
    
    /* 🔥 نمایش جادویی با هاور (Hover) 🔥 */
    .yk-filter-box:hover .yk-filter-title { border-color: #000; }
    .yk-filter-box:hover .arrow { transform: rotate(180deg); }
    .yk-filter-box:hover .yk-filter-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
    
    /* Wider dropdown for price to match Digistyle */
    .yk-price-box-wrapper .yk-filter-dropdown { width: 340px; }
    
    /* Max height and scroll inside dropdown */
    .yk-filter-items-list { max-height: 250px; overflow-y: auto; padding-left: 5px; }
    
    /* Sort Select Box */
    .yk-sort-select { width: 100%; padding: 10px; border: 1px solid #eee; border-radius: 6px; font-size: 13px; font-family: inherit; outline: none; cursor: pointer; }
}

/* --------------------------------------------------
   MOBILE FULLSCREEN DRAWER (FIXED SCROLL & OVERLAY)
-------------------------------------------------- */
@media (max-width: 768px) {
    .yk-hide-mobile { display: none !important; }
    .yk-mobile-toolbar { display: flex; gap: 10px; margin-bottom: 20px; border: 1px solid #eee; border-radius: 8px; padding: 5px; background: #fff; }
    .yk-btn-mobile { flex: 1; padding: 12px; font-size: 14px; font-weight: bold; background: transparent; border: none; display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; border-left: 1px solid #eee; color: #333; }
    .yk-mobile-sort-container { flex: 1; }
    .yk-mobile-sort-container select { width: 100%; height: 100%; padding: 0 10px; border: none; background: transparent; font-size: 13px; font-weight: bold; text-align: center; text-align-last: center; outline: none; color: #333;}
    
    /* Fixed Fullscreen Drawer */
    .yk-filter-sidebar {
        position: fixed; top: 0; right: -100%; width: 100vw; height: 100vh; height: 100dvh; background: #f8f9fa;
        z-index: 999999; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; /* Prevent body scroll bleed */
    }
    .yk-filter-sidebar.is-active { transform: translateX(-100%); } /* Slide in */
    
    .yk-sidebar-header {
        position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
        padding: 18px 20px; border-bottom: 1px solid #e0e0e0; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); flex-shrink: 0;
    }
    .yk-sidebar-header .title { font-size: 16px; font-weight: bold; margin: 0; color:#000; }
    .yk-sidebar-header .close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color:#000; }
    
    /* Scrolling Area restricted */
    #yk-ajax-filter-form { 
        padding: 15px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; 
    }
    
    .yk-filter-box { background: #fff; margin-bottom: 15px; border-radius: 12px; padding: 18px; border: 1px solid #eee; display: block; }
    .yk-filter-title { font-size: 15px; font-weight: bold; margin-bottom: 15px; color: #111; display: block; text-align: right; }
    .yk-filter-title .arrow { display: none; }
    .yk-filter-dropdown { display: block; position: static; box-shadow: none; border: none; padding: 0; }
    
    /* Actions pinned to bottom of drawer */
    .yk-filter-actions-mobile {
        display: flex; gap: 10px; padding: 15px; background: #fff; border-top: 1px solid #e0e0e0; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); flex-shrink: 0;
    }
    .yk-clear-all-btn, .yk-close-drawer-btn { flex: 1; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; border: none; }
    .yk-clear-all-btn { background: #e0e0e0; color: #333; }
    .yk-close-drawer-btn { background: #ce1a5e; color: #fff; }
}

/* --------------------------------------------------
   CUSTOM UI COMPONENTS (Color, Size, Price, Search)
-------------------------------------------------- */
.yk-live-search-box { margin-bottom: 15px; }
.yk-search-input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box;}

.yk-cat-list { display: flex; flex-direction: column; gap: 12px; }
.yk-checkbox-label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #444; cursor: pointer; }
.yk-checkbox-label input { display: none; }
.yk-checkbox-label .check-box { width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 4px; display: inline-flex; justify-content: center; align-items: center; transition: 0.2s;}
.yk-checkbox-label input:checked + .check-box { background: #ce1a5e; border-color: #ce1a5e; }
.yk-checkbox-label input:checked + .check-box::before { content: "✔"; color: #fff; font-size: 12px; }
.yk-checkbox-label input:checked ~ .item-name { font-weight: bold; color: #000; }

.yk-size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.yk-size-btn input { display: none; }
.yk-size-btn .size-label {
    display: block; padding: 8px 14px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 12px; color: #444; cursor: pointer; text-align: center; transition: all 0.2s; background: #fff;
}
.yk-size-btn input:checked + .size-label, .yk-size-btn:hover .size-label {
    border-color: #000; color: #000; font-weight: bold; background: #fafafa;
}

.yk-color-grid { display: flex; flex-wrap: wrap; gap: 15px; }
.yk-color-swatch-label { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.yk-color-swatch-label input { display: none; }
.yk-color-swatch-label .color-swatch {
    display: block; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ddd; transition: 0.2s;
}
.yk-color-swatch-label input:checked + .color-swatch {
    border: 2px solid #000; padding: 2px; background-clip: content-box; transform: scale(1.1);
}
.yk-color-swatch-label .color-name { font-size: 11px; color: #666; }

/* Custom Price Slider UI */
.yk-price-slider-ui { position: relative; height: 4px; background: #eee; border-radius: 2px; margin: 25px 10px 30px; }
.yk-price-selected-line { position: absolute; height: 100%; background: #000; top: 0; z-index: 1; }
.yk-price-handle {
    position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 20px;
    background: #000; border-radius: 50%; cursor: grab; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.yk-price-handle:active { cursor: grabbing; transform: translateY(-50%) scale(1.1); }
.yk-price-handle.left { left: 0; transform: translate(-50%, -50%); }
.yk-price-handle.left:active { transform: translate(-50%, -50%) scale(1.1); }
.yk-price-handle.right { right: 0; transform: translate(50%, -50%); }
.yk-price-handle.right:active { transform: translate(50%, -50%) scale(1.1); }

.yk-price-inputs { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 20px; direction: ltr; }
.yk-price-inputs .input-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;}
.yk-price-inputs .input-group label { font-size: 11px; color: #666; }
.yk-price-inputs .input-wrapper { display: flex; align-items: center; border: 1px solid #e0e0e0; border-radius: 4px; padding: 0 10px; width: 100%; box-sizing: border-box; background: #fdfdfd;}
.yk-price-inputs .input-wrapper .currency { font-size: 11px; color: #333; margin-right: 5px; }
.yk-price-inputs input { width: 100%; padding: 10px 5px; border: none; background: transparent; text-align: left; font-size: 13px; font-family: inherit; font-weight: bold; outline: none; }
.yk-price-inputs input::-webkit-outer-spin-button, .yk-price-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.yk-price-actions { display: flex; gap: 10px; }
.yk-apply-price-btn, .yk-clear-price-btn { flex: 1; padding: 10px; border-radius: 6px; font-weight: bold; cursor: pointer; font-family: inherit; font-size: 13px; border: 1px solid #000;}
.yk-apply-price-btn { background: #000; color: #fff; }
.yk-clear-price-btn { background: #fff; color: #000; }

.yk-shop-content { transition: opacity 0.3s; }
.yk-is-loading { opacity: 0.4; pointer-events: none; }

/* ==================================================
   YelKids - Premium Product Card Styling (Unchanged)
   ================================================== */
.yk-products-grid { width: 100%; direction: rtl; }
.yk-products-grid ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.yk-products-grid ul.products li.product { width: 100% !important; margin: 0 !important; padding: 0 !important; }
.yk-product-item { background: #fff; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.yk-product-item:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.06); transform: translateY(-4px); }
.yk-product-item .yk-item-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; background-color: #fcfcfc; overflow: hidden; }
.yk-product-item .yk-item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
.yk-product-item .yk-item-title { font-size: 14px !important; font-weight: 500 !important; color: #222 !important; margin: 15px 12px 10px !important; min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; text-align: center; }
.yk-item-details { display: flex; flex-direction: column; gap: 5px; margin: 0 12px 12px; }
.yk-item-sku, .yk-item-pack { display: flex; justify-content: space-between; font-size: 11px; color: #888; padding-bottom: 4px; border-bottom: 1px solid #f5f5f5; }
.yk-item-sku-value, .yk-item-pack-value { color: #444; font-weight: 600; font-size: 10px; }
.yk-item-price { font-size: 15px !important; font-weight: 700 !important; color: #ce1a5e !important; text-align: center; margin-bottom: 15px; }
.yk-product-item .yk-badge, .yk-product-item .yk-badge-new, .yk-product-item .yith-wcwl-add-to-wishlist, .yk-product-item .heart-icon, .yk-product-item .yk-atw-button { display: none !important; }
@media (max-width: 768px) {
    .yk-products-grid ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    .yk-product-item .yk-item-thumb { aspect-ratio: 4 / 5; }
    .yk-product-item .yk-item-title { font-size: 13px !important; min-height: 38px; }
}

















/* مخفی کردن بخش قیمت متغیر در پایین */
.single_variation_wrap .woocommerce-variation-price {
    display: none !important;
}

















/* ==================================================
   YELKIDS SINGLE PRODUCT PAGE (DIGIKALA 3-COL LAYOUT)
   ================================================== */

/* 🔥 HIDE ALL JUNK WIDGETS AND SIDEBARS GLOBALLY ON SINGLE PRODUCT 🔥 */
body.single-product #sidebar,
body.single-product .widget-area,
body.single-product #secondary,
body.single-product .storefront-sidebar,
body.single-product .widget_pages,
body.single-product .widget_archive,
body.single-product .widget_categories { 
    display: none !important; 
}

/* Force Primary Container to be 100% and hide default breadcrumbs */
body.single-product #primary { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; }
body.single-product nav.woocommerce-breadcrumb { display: none !important; }
body.single-product .yk-single-breadcrumb nav.woocommerce-breadcrumb { display: flex !important; margin:0 !important; } 

.yk-single-product-wrapper { margin-top: 20px; font-family: inherit; color: #333;}
.yk-single-breadcrumb { margin-bottom: 15px; font-size: 11px; color: #888; }
.yk-single-breadcrumb a { color: #555; text-decoration: none; }

/* --- 3-Column Grid Desktop --- */
.yk-product-top-section {
    display: grid;
    grid-template-columns: 35% 38% 23%;
    gap: 2%;
    margin-bottom: 40px;
    align-items: start;
}

.yk-sticky-col { position: sticky; top: 20px; }

/* --- 1. Gallery (Right) --- */
.yk-gallery-main-image {
    width: 100%; aspect-ratio: 1/1; background: #f9f9f9; border-radius: 12px; margin-bottom: 10px;
    display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; position: relative;
}
.yk-gallery-main-image img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity 0.3s ease; }
.yk-gallery-expand-icon {
    position: absolute; top: 15px; left: 15px; background: rgba(255,255,255,0.8);
    width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #555;
}
.yk-gallery-thumbnails { display: flex; gap: 10px; height: 75px; }
.yk-thumb-item {
    flex: 1; border-radius: 8px; border: 1px solid #eee; overflow: hidden; cursor: pointer; position: relative;
    display: flex; justify-content: center; align-items: center;
}
.yk-thumb-item img { max-width: 100%; max-height: 100%; object-fit: cover; }
.yk-thumb-item.has-more .more-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.6); color: #fff;
    display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 16px;
}

/* --- 2. Info Section (Center) --- */
.yk-product-title { font-size: 20px; font-weight: 900; color: #222; margin: 0 0 25px; line-height: 1.6; }
.yk-product-meta-top { display: flex; align-items: center; gap: 20px; margin-bottom: 25px;}
.yk-sku { color: #888; font-size: 11px; background: #f5f5f5; padding: 4px 10px; border-radius: 20px;}

.yk-stars-container .star-rating { overflow: hidden; position: relative; height: 1em; line-height: 1; font-size: 15px; width: 5.4em; font-family: sans-serif; }
.yk-stars-container .star-rating::before { content: "★★★★★"; color: #e0e0e0; float: left; top: 0; left: 0; position: absolute; letter-spacing: 2px;}
.yk-stars-container .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.yk-stars-container .star-rating span::before { content: "★★★★★"; top: 0; position: absolute; left: 0; color: #f4b71a; letter-spacing: 2px;}

/* Attributes (Desktop & Mobile 2 Columns) */
.yk-short-attributes { margin-bottom: 20px; }
.yk-short-attributes h3 { font-size: 14px; margin-bottom: 12px; color: #111; font-weight: bold; }
.yk-attr-list { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 12px !important; 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 0 10px !important; 
}
.yk-attr-list li { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.yk-attr-label { font-size: 11.5px; color: #888; display: flex; align-items: center; gap: 5px; }
.yk-attr-label::before { content: "•"; color: #ddd; font-size: 12px; }
.yk-attr-val { font-size: 12px; font-weight: 700; color: #222; }

.yk-attr-divider { border: 0; height: 1px; background: #eee; margin: 20px 0; }
.yk-short-description { font-size: 12px; line-height: 1.8; color: #555; margin-bottom: 20px; }
.yk-text-link { background: transparent; border: none; color: #0073e6; font-size: 11px; font-weight: bold; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 3px; font-family: inherit; }

/* --- 🔥 FIX ADDITIONAL INFORMATION (توضیحات تکمیلی) TAB 🔥 --- */
/* Completely resetting WooCommerce default table styles */
.woocommerce-Tabs-panel--additional_information h2,
.woocommerce-Tabs-panel--description h2 { display: none !important; }

.woocommerce-product-attributes { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 15px !important; 
    border: none !important; 
    width: 100% !important; 
    margin: 0 !important; 
    padding: 0 !important;
}
.woocommerce-product-attributes tbody {
    display: contents !important; /* This allows tr to participate in grid directly */
}
.woocommerce-product-attributes tr { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 4px !important; 
    background: transparent !important; 
    border: none !important; 
    border-radius: 0 !important; 
    padding: 0 !important; 
    margin: 0 !important;
}
.woocommerce-product-attributes th { 
    font-size: 11.5px !important; 
    color: #888 !important; 
    font-weight: normal !important; 
    background: transparent !important; 
    border: none !important; 
    padding: 0 !important; 
    text-align: right !important; 
    width: 100% !important;
    display: flex !important; 
    align-items: center !important; 
    gap: 5px !important;
}
.woocommerce-product-attributes th::before { content: "• "; color: #ddd; font-size: 12px;}
.woocommerce-product-attributes td { 
    font-size: 12px !important; 
    font-weight: 700 !important; 
    color: #222 !important; 
    border: none !important; 
    padding: 0 !important; 
    text-align: right !important; 
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
}
.woocommerce-product-attributes td p { margin: 0 !important; font-size: inherit !important; color: inherit !important; }

/* --- 3. Buy Box (Left) - YOUR EXACT STYLES --- */
.yk-add-to-cart-box { background: #fafafa; border-radius: 12px; padding: 20px; border: 1px solid #e4e4e4; box-sizing: border-box; width: 100%;}
.yk-buybox-seller-info { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #555; padding-bottom: 12px; border-bottom: 1px dashed #eee; margin-bottom: 12px;}
.yk-buybox-seller-info strong { color: #111; font-size: 13px;}
.yk-pack-count-info { font-size: 12px; color: #555; margin-bottom: 15px; background: #fff; padding: 8px; border-radius: 6px; border: 1px dashed #ccc; text-align: center;}
.yk-pack-count-info strong { color: #ce1a5e; font-size: 14px;}
.yk-size-guide-wrapper { margin-bottom: 15px; text-align: right; }
.yk-price-wrapper { font-size: 18px; font-weight: bold; color: #ce1a5e; margin-bottom: 20px; text-align: right;}
.yk-price-wrapper del { color: #999; font-size: 12px; font-weight: normal; margin-left: 8px; }

.woocommerce-variation-availability, .stock, p.stock { display: none !important; }
table.variations { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
table.variations th { text-align: right; padding: 10px 0 10px 15px; font-size: 13px; font-weight: normal; color: #666; width: 30%; vertical-align: middle;}
table.variations td { padding: 10px 0; vertical-align: middle; }
table.variations select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 13px; outline: none; background: #fff;}
.reset_variations { font-size: 11px; color: #ef394e; text-decoration: none; display: none !important; margin-top: 8px; font-weight: bold;}

.yk-ajax-cart-container form.cart,
.woocommerce-variation-add-to-cart { 
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%;
}
.yk-ajax-cart-container .quantity { flex: 0 0 50px; margin: 0; display: block !important;}
.yk-ajax-cart-container .quantity input.qty { width: 100%; height: 48px; text-align: center; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; font-weight: bold; font-size: 15px; padding: 0;}
.yk-ajax-cart-container .quantity input.qty::-webkit-outer-spin-button, 
.yk-ajax-cart-container .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.yk-btn-primary, .yk-ajax-cart-container .single_add_to_cart_button { 
    flex: 1; min-width: 140px; height: 48px; background: #ef394e !important; color: #fff !important; border: none !important; border-radius: 8px !important; 
    font-size: 10px !important; font-weight: bold !important; cursor: pointer !important; transition: 0.3s !important; display: flex !important; justify-content: center !important; align-items: center !important; font-family: inherit !important; margin: 0 !important;padding-right: 5px !important;
  padding-left: 5px !important;
}
.yk-btn-primary:hover, .yk-ajax-cart-container .single_add_to_cart_button:hover { background: #d32f41 !important; }
.yk-ajax-cart-container .single_add_to_cart_button.loading { opacity: 0.5; pointer-events: none; }

.yk-login-notice-box { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 10px 0;}
.yk-login-notice-box .icon-lock { color: #aaa; }
.yk-login-notice-box p { font-size: 12px; color: #555; margin: 0; font-weight: bold; line-height: 1.6;}

/* --- Modals & Popups --- */
.yk-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 999999;
    display: none; justify-content: center; align-items: center; backdrop-filter: blur(5px);
}
.yk-modal.is-open { display: flex; }
.yk-close-modal { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 28px; color: #999; cursor: pointer; z-index: 10;}
.yk-close-modal:hover { color: #000; }

/* Add To Cart Success Popup */
.yk-cart-success-box { background: #fff; width: 90%; max-width: 450px; border-radius: 12px; padding: 40px 30px; text-align: center; position: relative;}
.yk-cart-success-box .success-header { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 25px; }
.yk-cart-success-box .check-icon { width: 60px; height: 60px; background: #e8f5e9; color: #4caf50; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; font-weight: bold; }
.yk-cart-success-box h3 { font-size: 18px; font-weight: bold; color: #111; margin: 0; }
.yk-cart-success-box .success-product-info { display: flex; align-items: center; gap: 15px; background: #fafafa; padding: 15px; border-radius: 8px; margin-bottom: 30px; text-align: right; border: 1px solid #eee; }
.yk-cart-success-box .success-product-info img { width: 60px; height: 60px; object-fit: contain; background: #fff; border-radius: 6px; }
.yk-cart-success-box .success-product-info span { font-size: 13px; font-weight: bold; color: #333; line-height: 1.5; }
.yk-cart-success-box .success-actions { display: flex; gap: 10px; }
.yk-cart-success-box .btn-view-cart { flex: 1; background: #ef394e; color: #fff; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 10px; border: 1px solid #ef394e;}
.yk-cart-success-box .btn-next-cart { flex: 1; background: #fff; color: #333; border: 1px solid #ccc; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 13px; cursor: pointer; font-size: 10px;}

/* Save for Later Toast */
.yk-toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #323232; color: #fff; padding: 12px 24px; border-radius: 8px;
    font-size: 14px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999999; animation: ykFadeIn 0.3s ease;
}
@keyframes ykFadeIn { from { bottom: 0; opacity: 0;} to { bottom: 20px; opacity: 1; } }

/* Fullscreen Gallery */
.yk-fullscreen-modal { background: #000; }
.yk-fullscreen-modal .yk-modal-content { width: 100vw; height: 100vh; display: flex; flex-direction: column; position: relative;}
.yk-fullscreen-modal .yk-modal-header { display: flex; justify-content: center; padding: 20px; border-bottom: 1px solid #333; position: relative;}
.yk-fullscreen-modal .yk-close-modal { color: #fff; }
.yk-gallery-tabs { display: flex; gap: 10px; background: #222; padding: 5px; border-radius: 30px; }
.yk-tab-btn { background: transparent; border: none; color: #999; padding: 8px 25px; border-radius: 20px; font-size: 14px; cursor: pointer; transition: 0.3s; font-family: inherit;}
.yk-tab-btn.active { background: #fff; color: #000; font-weight: bold; }
.yk-tab-content { display: none; flex: 1; height: calc(100vh - 80px); }
.yk-tab-content.active { display: flex; flex-direction: column; }

.yk-gallery-main-swiper { flex: 1; width: 100%; height: 80%; }
.yk-gallery-main-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; }
.yk-gallery-main-swiper img { max-width: 90%; max-height: 90vh; object-fit: contain; }
.yk-nav-w { color: #fff !important; }

.yk-gallery-thumbs-swiper { height: 100px; padding: 10px; background: #111; box-sizing: border-box; }
.yk-gallery-thumbs-swiper .swiper-slide { width: 80px; height: 100%; opacity: 0.4; cursor: pointer; border-radius: 6px; overflow: hidden; border: 2px solid transparent;}
.yk-gallery-thumbs-swiper .swiper-slide-thumb-active { opacity: 1; border-color: #fff; }
.yk-gallery-thumbs-swiper img { width: 100%; height: 100%; object-fit: cover; }

/* Buyer Review Cards in Gallery */
.yk-buyer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 30px; overflow-y: auto; width: 100%; box-sizing: border-box;}
.yk-buyer-review-card { background: #111; border-radius: 12px; overflow: hidden; border: 1px solid #333; display: flex; flex-direction: column;}
.yk-buyer-img-box { height: 200px; width: 100%; }
.yk-buyer-img-box img { width: 100%; height: 100%; object-fit: contain; background: #000;} 
.yk-buyer-text-box { padding: 15px; color: #eee; font-size: 13px; line-height: 1.6; }
.yk-buyer-text-box .reviewer-name { font-weight: bold; color: #fff; margin-bottom: 5px; font-size: 14px;}
.yk-buyer-text-box .reviewer-rating { margin-bottom: 10px; }

/* Attribute Modal Override - FIX SPACING AND SIZING */
.yk-attr-modal-box { 
    background: #fff; 
    width: 90%; 
    max-width: 600px !important; 
    border-radius: 12px; 
    padding: 25px !important; 
    position: relative; 
    max-height: 90vh; 
    overflow-y: auto;
}
.yk-attr-modal-box .yk-modal-header-simple { 
    font-size: 16px !important; 
    font-weight: bold; 
    margin-bottom: 20px !important; 
    border-bottom: none !important; 
    padding-bottom: 0 !important; 
    text-align: right;
}

.yk-size-img { max-width: 100%; border-radius: 8px; margin-bottom: 20px; }

/* --- Mobile Specific --- */
@media (max-width: 768px) {
    .yk-product-top-section { grid-template-columns: 100%; gap: 20px; }
    .yk-product-gallery-sticky { position: static; height: auto; }
    
    /* 🔥 FORCED 2 COLUMNS IN MOBILE SPECIFICATIONS 🔥 */
    .yk-attr-list { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    
    .yk-add-to-cart-box { padding: 20px; border-radius: 8px; margin-top: 20px;}
    .yk-price-wrapper { text-align: center; }
    .yk-cart-success-box .success-actions { flex-direction: column; }
    
    .yk-mobile-sticky-cart {
        position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 15px 20px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; z-index: 9999;
    }
    .yk-sticky-price { font-size: 18px; font-weight: bold; color: #ce1a5e; }
    .yk-sticky-price del { font-size: 12px; color: #999; margin-left: 5px; }
}








































/* ==================================================
   YELKIDS CART PAGE (DIGIKALA STYLE REBUILD)
   ================================================== */

.yk-cart-page-wrapper { font-family: inherit; color: #333; margin: 30px auto 60px; width: min(100% - 32px, 1300px); }

/* --- 1. Timeline Stepper --- */
.yk-checkout-timeline { display: flex; align-items: center; justify-content: center; margin-bottom: 50px; padding: 20px 0; }
.timeline-step { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #aaa; position: relative; z-index: 2;}
.timeline-step.active { color: #ef394e; }
.step-icon { width: 50px; height: 50px; border-radius: 50%; border: 2px solid currentcolor; display: flex; justify-content: center; align-items: center; background: #fff; }
.timeline-step.active .step-icon { background: #ef394e; color: #fff; border-color: #ef394e; }
.step-label { font-size: 13px; font-weight: bold; }
.timeline-line { flex: 0 1 180px; height: 2px; background: #eee; margin: 0 15px; position: relative; top: -14px;}

/* --- 2. Layout Grid --- */
.yk-cart-grid { display: grid; grid-template-columns: 70% 28%; gap: 2%; align-items: start; direction: rtl;}
.yk-sticky-col { position: sticky; top: 20px; }

/* Empty State */
.yk-cart-empty-state { border: 1px solid #e0e0e0; border-radius: 12px; padding: 60px 20px; background: #fff; text-align: center; margin-bottom: 30px;}
.yk-cart-empty-state h2 { font-size: 18px; font-weight: bold; color: #111; margin-bottom: 10px;}
.yk-cart-empty-state p { font-size: 13px; color: #666; margin-bottom: 25px;}
.yk-btn-outline-primary { display: inline-block; border: 2px solid #ef394e; color: #ef394e; padding: 10px 25px; border-radius: 8px; font-weight: bold; text-decoration: none;}
.yk-btn-outline-primary:hover { background: #ef394e; color: #fff;}
.woocommerce-notices-wrapper { display: none !important; }

/* --- 3. Main Cart Block --- */
.yk-cart-block { border: 1px solid #e0e0e0; border-radius: 12px; padding: 0; background: #fff; margin-bottom: 30px;}
.yk-cart-block-header { display: flex; align-items: center; gap: 10px; padding: 20px; border-bottom: 1px solid #eee; }
.yk-cart-block-header h2 { margin: 0; font-size: 18px; font-weight: bold; color: #222; }
.yk-cart-count { font-size: 13px; color: #fff; }

.yk-cart-items-wrapper { display: flex; flex-direction: column; }
.yk-cart-item-card { display: flex; gap: 20px; padding: 25px 20px; border-bottom: 1px solid #f5f5f5; position: relative; transition: opacity 0.3s;}
.yk-cart-item-card:last-child { border-bottom: none; }

.yk-item-visual { width: 140px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.yk-item-visual img { width: 100%; height: auto; border-radius: 8px; object-fit: contain;}

.yk-item-details { flex: 1; display: flex; flex-direction: column; }
.yk-item-title { font-size: 16px; font-weight: bold; color: #222; text-decoration: none; line-height: 1.6; margin-bottom: 15px; }

/* Custom Attributes UI */
.yk-item-meta-vars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.yk-cart-var-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; }
.yk-color-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #ccc; display: inline-block;}
.yk-var-icon { width: 14px; height: 14px; display: inline-block; position: relative;}
.yk-var-icon::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: #ccc;}
.yk-var-label { color: #888; }
.yk-var-value { font-weight: bold; color: #333; }

.yk-item-guarantee { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #555; padding-right: 12px;}
.yk-item-guarantee span { display: flex; align-items: center; gap: 8px; }

.yk-item-actions { width: 220px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}
.yk-item-price-box { font-size: 20px; font-weight: bold; color: #111; text-align: left; width: 100%;}
.yk-item-qty-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; width: 100%;}

/* Qty Input */
.yk-item-quantity-ui .quantity { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; height: 40px;}
.yk-item-quantity-ui .quantity input.qty { width: 50px; text-align: center; border: none; font-weight: bold; font-size: 15px; padding: 0; -moz-appearance: textfield;}
.yk-item-quantity-ui .quantity input.qty::-webkit-outer-spin-button, .yk-item-quantity-ui .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.yk-save-for-later-btn { background: #fff; border: 1px solid #ddd; color: #555; padding: 8px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: 0.2s;}
.yk-save-for-later-btn:hover { border-color: #ef394e; color: #ef394e; }

/* Hide WooCommerce native meta strings since we built our own */
dl.variation { display: none !important; }

/* --- 4. Cross Sells Box --- */
.yk-cart-cross-sells { border: 1px solid #e0e0e0; border-radius: 12px; padding: 25px; background: #fff; margin-bottom: 30px;}
.yk-cart-cross-sells h2 { font-size: 16px; font-weight: bold; margin: 0 0 20px 0; color: #111; text-align: center; background: #fdfdfd; padding: 10px; border-radius: 20px;}
.yk-compact-card .yk-item-thumb { aspect-ratio: 1/1; background: #f9f9f9; border-radius: 8px; overflow: hidden; margin-bottom: 10px;}
.yk-compact-card .yk-item-title { font-size: 13px; min-height: 40px; margin: 0 0 10px; line-height: 1.5; color: #333;}
.yk-compact-card .yk-item-price { font-size: 14px; font-weight: bold; color: #ce1a5e; }

/* --- 5. Bottom Saved/Wishlist Tabs --- */
.yk-cart-bottom-saved { border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; overflow: hidden; display: block !important; }
.yk-saved-tabs-header { display: flex; border-bottom: 1px solid #eee; background: #fafafa;}
.yk-saved-tab-btn { flex: 1; background: none; border: none; font-size: 14px; font-weight: bold; color: #777; padding: 18px; cursor: pointer; border-bottom: 3px solid transparent; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px;}
.yk-saved-tab-btn.active { color: #ef394e; border-bottom-color: #ef394e; background: #fff;}
.yk-badge { background: #ddd; color: #555; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: normal; }
.yk-saved-tab-btn.active .yk-badge { background: #ef394e; color: #fff; }

.yk-saved-tabs-body { padding: 25px; }
.yk-saved-tab-panel { display: none; }
.yk-saved-tab-panel.active { display: block; }

.yk-saved-items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.yk-saved-card { border: 1px solid #eee; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; text-align: center; background: #fff; position: relative;}
.yk-saved-img { background: #f9f9f9; padding: 15px; height: 160px;}
.yk-saved-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;}
.yk-saved-title { font-size: 13px; font-weight: bold; color: #333; padding: 15px 10px; margin: 0; line-height: 1.5; flex: 1; text-decoration: none;}
.yk-add-back-btn { display: block; background: #fff; border-top: 1px solid #eee; color: #ef394e; padding: 12px; font-weight: bold; font-size: 12px; text-decoration: none; cursor: pointer; border: none; width: 100%; font-family: inherit;}
.yk-add-back-btn:hover { background: #fdfdfd; }
.yk-remove-saved { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: #fff; border: 1px solid #eee; border-radius: 50%; color: #999; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 16px; line-height: 1;}
.yk-remove-saved:hover { color: #ef394e; border-color: #ef394e; }

.yk-empty-state { text-align: center; padding: 40px 20px; color: #999; }
.yk-empty-state p { font-size: 15px; font-weight: bold; margin-top: 15px; }

/* --- 6. Sidebar (Totals) --- */
.yk-cart-totals-box { border: 1px solid #e0e0e0; border-radius: 12px; padding: 20px; background: #fdfdfd; margin-bottom: 20px; }
.cart_totals h2 { display: none; }
.shop_table.shop_table_responsive { width: 100%; border-collapse: collapse; margin-bottom: 20px;}
.shop_table.shop_table_responsive th, .shop_table.shop_table_responsive td { padding: 15px 0; border-bottom: 1px solid #eee; font-size: 13px; color: #555; text-align: left;}
.shop_table.shop_table_responsive th { text-align: right; color: #222; font-weight: normal; border-left: none;}
.order-total th { font-weight: bold; font-size: 15px; color: #111;}
.order-total td { font-weight: bold; font-size: 18px; color: #111;}
.wc-proceed-to-checkout .checkout-button { display: block; width: 100%; background: #ef394e; color: #fff; text-align: center; padding: 15px; border-radius: 8px; font-weight: bold; font-size: 15px; text-decoration: none; transition: 0.3s; }
.wc-proceed-to-checkout .checkout-button:hover { background: #d32f41; }
/* Coupon Override */
.coupon { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #eee;}
.coupon input.input-text { width: 100%; border: 1px solid #ddd; padding: 12px; border-radius: 8px; font-family: inherit; font-size: 13px; text-align: left; direction: ltr;}
.coupon button.button { width: 100%; background: #fff; border: 1px solid #ef394e; color: #ef394e; padding: 12px; border-radius: 8px; font-weight: bold; cursor: pointer; font-family: inherit;}

.yk-sidebar-promo { display: flex; align-items: center; gap: 10px; padding: 15px; border-radius: 12px; margin-bottom: 10px; font-size: 12px; font-weight: bold; }
.yk-promo-purple { background: #f3e5f5; color: #8e24aa; }
.yk-promo-green { background: #e8f5e9; color: #2e7d32; }

/* --- 7. Modal (Digikala Style) --- */
.yk-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 999999; display: none; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.yk-modal.is-open { display: flex; }
.yk-save-options-box { background: #fff; width: 90%; max-width: 450px; border-radius: 12px; padding: 25px; position: relative;}
.yk-close-modal { position: absolute; top: 15px; left: 15px; background: none; border: none; color: #999; cursor: pointer;}
.yk-modal-header-simple { font-size: 16px; font-weight: bold; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; color: #111;}
.yk-save-options-form { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px;}
.yk-radio-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 15px; border: 1px solid #eee; border-radius: 8px; transition: 0.2s;}
.yk-radio-label:hover { border-color: #ccc; }
.yk-radio-label input { margin-top: 5px; cursor: pointer;}
.radio-content { display: flex; flex-direction: column; gap: 5px;}
.radio-content .title { font-size: 14px; font-weight: bold; color: #222;}
.radio-content .desc { font-size: 11px; color: #888;}
.yk-btn-primary { background: #ef394e; color: #fff; border: none; border-radius: 8px; padding: 15px; font-size: 14px; font-weight: bold; cursor: pointer; font-family: inherit;}

/* --- Mobile Specific --- */
@media (max-width: 900px) {
    .yk-checkout-timeline { display: none; } 
    .yk-cart-grid { grid-template-columns: 100%; gap: 30px; }
    
    /* 🔥 MOBILE LAYOUT FIXES (Align Image and Details horizontally) 🔥 */
    .yk-cart-item-card { 
        flex-direction: row; /* Align horizontally */
        flex-wrap: wrap; /* Allow wrapping for bottom actions */
        padding: 15px; 
        gap: 15px;
    }
    
    /* Image Section (Right) */
    .yk-item-visual { 
        width: 100px; /* Fixed width for image */
        flex: 0 0 100px; 
    }
    .yk-item-visual img { width: 100px; height: auto;}
    
    /* Details Section (Left of Image) */
    .yk-item-details { 
        flex: 1; 
        min-width: 0; /* Prevent overflowing */
    }
    .yk-item-title { font-size: 14px; margin-bottom: 10px;}
    .yk-item-meta-vars { font-size: 11px; margin-bottom: 10px;}
    
    /* Guarantee block cleanup */
    .yk-item-guarantee { padding-right: 0; border-right: none; margin-top: 5px; gap: 4px;}
    .yk-item-guarantee span { display: inline-flex; width: 100%; font-size: 10px; }
    
    /* Actions Section (Bottom Full Width) */
    .yk-item-actions { 
        width: 100%; 
        flex: 0 0 100%; /* Force to new row */
        flex-direction: row; 
        align-items: center; 
        justify-content: space-between; 
        border-top: 1px solid #eee; 
        padding-top: 15px;
    }
    .yk-item-price-box { font-size: 16px; width: auto;}
    .yk-item-qty-actions { 
        width: auto; 
        flex-direction: row-reverse; /* Qty on right, Save button on left */
        gap: 10px;
    }
    .yk-item-quantity-ui .quantity { height: 36px; }
    .yk-item-quantity-ui .quantity input.qty { font-size: 14px; width: 40px;}
    
    /* Show "Save for later" button on mobile now, correctly positioned */
    .yk-desktop-only { display: flex !important; padding: 6px 12px; font-size: 11px;}
    .yk-mobile-only { display: none !important; }
    
    /* Remove Swiper arrows and fix title on mobile cross-sells */
    .yk-cart-cross-sells h2 { font-size: 13px !important; padding: 5px; }
    .yk-cart-cross-sells .swiper-button-next, 
    .yk-cart-cross-sells .swiper-button-prev { display: none !important; }
    
    .yk-saved-items-grid { grid-template-columns: repeat(2, 1fr); }
    
    .yk-cart-sidebar-column { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 15px; box-shadow: 0 -5px 20px rgba(0,0,0,0.1); z-index: 999; }
    .yk-cart-totals-box { border: none; padding: 0; margin: 0; background: transparent;}
    .shop_table.shop_table_responsive tr:not(.order-total) { display: none; } 
    .shop_table.shop_table_responsive { margin-bottom: 10px; border: none;}
    .shop_table.shop_table_responsive td, .shop_table.shop_table_responsive th { border: none; padding: 5px 0;}
    .wc-proceed-to-checkout .checkout-button { padding: 12px; }
    .yk-sidebar-promo, .coupon { display: none; }
    .yk-cart-page-wrapper { margin-bottom: 150px; } 
}











































/* ==================================================
   YELKIDS CHECKOUT PAGE (MODERN 2-COL LAYOUT)
   ================================================== */

/* Layout Forces */
.yk-checkout-layout { 
    display: grid !important; 
    grid-template-columns: 65% 32% !important; 
    gap: 3% !important; 
    align-items: start !important; 
    direction: rtl !important; 
    margin-bottom: 60px !important;
}

.yk-checkout-main-column { width: 100% !important; }
.yk-checkout-sidebar-column { width: 100% !important; }

/* Cards Styling (Matching the Reference) */
.yk-checkout-card { 
    background: #fff !important; 
    border: 1px solid #e0e0e0 !important; 
    border-radius: 12px !important; 
    padding: 30px !important; 
}
.yk-card-title { 
    font-size: 18px !important; 
    font-weight: bold !important; 
    color: #ef394e !important; 
    margin-top: 0 !important; 
    margin-bottom: 25px !important; 
    padding-bottom: 15px !important; 
    border-bottom: 1px solid #eee !important;
}

/* Hide Default WooCommerce Titles */
.woocommerce-billing-fields > h3, 
.woocommerce-shipping-fields > h3,
h3#order_review_heading { 
    display: none !important; 
}

/* --- Coupon Form Styling --- */
.woocommerce-form-coupon-toggle {
    background: #f0f8ff !important;
    border: 1px solid #cce5ff !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: transparent !important;
    border: none !important;
    color: #0056b3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; }
.woocommerce-form-coupon {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.woocommerce-form-coupon p { margin: 0 !important; }
.woocommerce-form-coupon p.form-row-first { flex: 1 !important; width: auto !important; float: none !important;}
/* 🔥 افزایش عرض دکمه کد تخفیف 🔥 */
.woocommerce-form-coupon p.form-row-last { flex: 0 0 180px !important; width: 180px !important; float: none !important;}
.woocommerce-form-coupon input.input-text { width: 100% !important; padding: 14px !important; border: 1px solid #ddd !important; border-radius: 8px !important; font-family: inherit !important;}
/* 🔥 یک‌خطی کردن متن دکمه 🔥 */
.woocommerce-form-coupon button { width: 100% !important; background: #ef394e !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 14px !important; font-weight: bold !important; cursor: pointer !important; font-family: inherit !important; white-space: nowrap !important;}

/* --- Input Fields (Gray bg, rounded) --- */
.woocommerce-checkout .form-row { margin-bottom: 20px !important; }
.woocommerce-checkout .form-row label { 
    font-size: 13px !important; 
    font-weight: bold !important; 
    color: #555 !important; 
    margin-bottom: 8px !important; 
    display: block !important;
}
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea { 
    width: 100% !important; 
    padding: 14px !important; 
    border: 1px solid #ddd !important; 
    border-radius: 8px !important; 
    background-color: #f9f9f9 !important; 
    font-family: inherit !important; 
    font-size: 14px !important; 
    transition: 0.3s !important;
    box-sizing: border-box !important;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus { 
    border-color: #ef394e !important; 
    background-color: #fff !important; 
    outline: none !important; 
    box-shadow: 0 0 0 3px rgba(239, 57, 78, 0.1) !important;
}

/* ==================================================
   YELKIDS CHECKOUT PAGE (MODERN 2-COL LAYOUT)
   ================================================== */

/* Layout Forces */
.yk-checkout-layout { 
    display: grid !important; 
    grid-template-columns: 65% 32% !important; 
    gap: 3% !important; 
    align-items: start !important; 
    direction: rtl !important; 
    margin-bottom: 60px !important;
    box-sizing: border-box !important;
}

.yk-checkout-main-column,
.yk-checkout-sidebar-column { 
    width: 100% !important; 
    box-sizing: border-box !important;
}

/* Cards Styling (Matching the Reference) */
.yk-checkout-card { 
    background: #fff !important; 
    border: 1px solid #e0e0e0 !important; 
    border-radius: 12px !important; 
    padding: 30px !important; 
    box-sizing: border-box !important;
}
.yk-card-title { 
    font-size: 18px !important; 
    font-weight: bold !important; 
    color: #ef394e !important; 
    margin-top: 0 !important; 
    margin-bottom: 25px !important; 
    padding-bottom: 15px !important; 
    border-bottom: 1px solid #eee !important;
}

/* Hide Default WooCommerce Titles */
.woocommerce-billing-fields > h3, 
.woocommerce-shipping-fields > h3,
h3#order_review_heading { 
    display: none !important; 
}

/* --- Coupon Form Styling --- */
.woocommerce-form-coupon-toggle {
    background: #f0f8ff !important;
    border: 1px solid #cce5ff !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: transparent !important;
    border: none !important;
    color: #0056b3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; }

.woocommerce-form-coupon {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
}
.woocommerce-form-coupon p { margin: 0 !important; }
.woocommerce-form-coupon p.form-row-first { flex: 1 !important; width: auto !important; float: none !important;}
.woocommerce-form-coupon p.form-row-last { flex: 0 0 180px !important; width: 180px !important; float: none !important;}
.woocommerce-form-coupon input.input-text { width: 100% !important; padding: 14px !important; border: 1px solid #ddd !important; border-radius: 8px !important; font-family: inherit !important; box-sizing: border-box !important;}
.woocommerce-form-coupon button { width: 100% !important; background: #ef394e !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 14px !important; font-weight: bold !important; cursor: pointer !important; font-family: inherit !important; white-space: nowrap !important; box-sizing: border-box !important;}

/* --- Input Fields (Gray bg, rounded) --- */
.woocommerce-checkout .form-row { margin-bottom: 20px !important; box-sizing: border-box !important; }
.woocommerce-checkout .form-row label { 
    font-size: 13px !important; 
    font-weight: bold !important; 
    color: #555 !important; 
    margin-bottom: 8px !important; 
    display: block !important;
}
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea { 
    width: 100% !important; 
    padding: 14px !important; 
    border: 1px solid #ddd !important; 
    border-radius: 8px !important; 
    background-color: #f9f9f9 !important; 
    font-family: inherit !important; 
    font-size: 14px !important; 
    transition: 0.3s !important;
    box-sizing: border-box !important;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus { 
    border-color: #ef394e !important; 
    background-color: #fff !important; 
    outline: none !important; 
    box-shadow: 0 0 0 3px rgba(239, 57, 78, 0.1) !important;
}

/* Two Columns for Form Inputs */
@media(min-width: 900px) {
    .woocommerce-checkout .form-row-first { width: 48% !important; float: right !important; clear: right !important;}
    .woocommerce-checkout .form-row-last { width: 48% !important; float: left !important; clear: left !important;}
    .woocommerce-checkout .form-row-wide { width: 100% !important; clear: both !important;}
}

/* --- Order Review Table --- */
.woocommerce-checkout-review-order-table { width: 100% !important; border-collapse: collapse !important; margin-bottom: 25px !important; box-sizing: border-box !important; }
.woocommerce-checkout-review-order-table th, 
.woocommerce-checkout-review-order-table td { padding: 15px 0 !important; border-bottom: 1px dashed #eee !important; font-size: 13px !important; text-align: right !important; }
.woocommerce-checkout-review-order-table thead th { font-weight: bold !important; color: #555 !important; border-bottom: 2px solid #eee !important;}
.woocommerce-checkout-review-order-table tbody td.product-name { color: #222 !important; font-weight: bold !important;}
.woocommerce-checkout-review-order-table tbody td.product-total { color: #555 !important; font-weight: bold !important; text-align: left !important;}
.woocommerce-checkout-review-order-table tfoot th { font-weight: normal !important; color: #555 !important; }
.woocommerce-checkout-review-order-table tfoot td { text-align: left !important; font-weight: bold !important; color: #222 !important; }
.woocommerce-checkout-review-order-table tfoot tr.order-total th { font-weight: bold !important; font-size: 16px !important; color: #111 !important;}
.woocommerce-checkout-review-order-table tfoot tr.order-total td { font-weight: bold !important; font-size: 20px !important; color: #ce1a5e !important;}

/* --- Custom Checkbox (Keep in Stock) --- */
.yk-custom-checkout-field {
    background: #f0f8ff !important;
    border: 1px solid #cce5ff !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin: 20px 0 !important;
    box-sizing: border-box !important;
}
.yk-keep-in-stock-checkbox label.checkbox { 
    color: #004085 !important; 
    font-weight: bold !important; 
    font-size: 13px !important; 
    cursor: pointer !important; 
    display: block !important; 
    position: relative !important;
    padding-right: 30px !important; 
    text-align: right !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}
.yk-keep-in-stock-checkbox input[type="checkbox"] { 
    width: 18px !important; 
    height: 18px !important; 
    cursor: pointer !important; 
    position: absolute !important; 
    right: 0 !important;
    top: 2px !important;
    margin: 0 !important;
}
.yk-keep-in-stock-checkbox .optional { display: none !important; }

/* --- Payment Methods --- */
#payment { background: transparent !important; border-radius: 0 !important; padding: 0 !important; box-sizing: border-box !important;}
#payment ul.payment_methods { border-bottom: none !important; padding: 0 !important; margin: 0 0 25px 0 !important; list-style: none !important; }
#payment ul.payment_methods li { background: #f9f9f9 !important; border: 1px solid #eee !important; border-radius: 8px !important; padding: 15px !important; margin-bottom: 10px !important; box-sizing: border-box !important;}
#payment ul.payment_methods li input { margin-left: 10px !important; }
#payment ul.payment_methods li label { font-weight: bold !important; font-size: 14px !important; color: #111 !important; cursor: pointer !important; display: inline-block !important; margin: 0 !important;}
#payment div.payment_box { background: transparent !important; color: #666 !important; font-size: 12px !important; padding: 10px 0 0 0 !important; margin: 0 !important; box-shadow: none !important;}
#payment div.payment_box::before { display: none !important; }
.woocommerce-privacy-policy-text { font-size: 11px !important; color: #888 !important; margin-bottom: 20px !important; line-height: 1.6 !important; text-align: justify !important; word-wrap: break-word !important;}

/* --- Place Order Button --- */
#place_order { 
    width: 100% !important; 
    background: #ef394e !important; 
    color: #fff !important; 
    border: none !important; 
    padding: 18px !important; 
    border-radius: 8px !important; 
    font-size: 16px !important; 
    font-weight: bold !important; 
    cursor: pointer !important; 
    transition: 0.3s !important; 
    font-family: inherit !important;
    box-sizing: border-box !important;
}
#place_order:hover { background: #d32f41 !important; }

/* ==================================================
   YELKIDS CHECKOUT PAGE (MODERN 2-COL LAYOUT) - CLEAN & FIXED
   ================================================== */

/* اعمال Box-Sizing برای جلوگیری از بیرون‌زدگی به دلیل Padding */
.woocommerce-checkout *, 
.woocommerce-checkout *::before, 
.woocommerce-checkout *::after {
    box-sizing: border-box !important;
}

/* --- Layout Forces (Desktop) --- */
.yk-checkout-layout { 
    display: grid !important; 
    grid-template-columns: 65% 32% !important; 
    gap: 3% !important; 
    align-items: start !important; 
    direction: rtl !important; 
    margin-bottom: 60px !important;
}

.yk-checkout-main-column, .yk-checkout-sidebar-column { 
    width: 100% !important; 
}

/* --- Cards Styling --- */
.yk-checkout-card { 
    background: #fff !important; 
    border: 1px solid #e0e0e0 !important; 
    border-radius: 12px !important; 
    padding: 30px !important; 
}

.yk-card-title { 
    font-size: 18px !important; 
    font-weight: bold !important; 
    color: #ef394e !important; 
    margin-top: 0 !important; 
    margin-bottom: 25px !important; 
    padding-bottom: 15px !important; 
    border-bottom: 1px solid #eee !important;
}

/* Hide Default WooCommerce Titles */
.woocommerce-billing-fields > h3, 
.woocommerce-shipping-fields > h3,
h3#order_review_heading { display: none !important; }

/* --- Coupon Form Styling --- */
.woocommerce-form-coupon-toggle {
    background: #f0f8ff !important;
    border: 1px solid #cce5ff !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
    background: transparent !important;
    border: none !important;
    color: #0056b3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; }

.woocommerce-form-coupon {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.woocommerce-form-coupon p { margin: 0 !important; }
.woocommerce-form-coupon p.form-row-first { flex: 1 !important; width: 100% !important; float: none !important; }
.woocommerce-form-coupon p.form-row-last { flex: 0 0 180px !important; width: 180px !important; float: none !important; }

.woocommerce-form-coupon input.input-text { 
    width: 100% !important; 
    padding: 14px !important; 
    border: 1px solid #ddd !important; 
    border-radius: 8px !important; 
    font-family: inherit !important; 
}

.woocommerce-form-coupon button { 
    width: 100% !important; 
    background: #ef394e !important; 
    color: #fff !important; 
    border: none !important; 
    border-radius: 8px !important; 
    padding: 14px !important; 
    font-weight: bold !important; 
    cursor: pointer !important; 
    font-family: inherit !important; 
    white-space: nowrap !important; 
}

/* --- Input Fields (Gray bg, rounded) --- */
.woocommerce-checkout .form-row { margin-bottom: 20px !important; }
.woocommerce-checkout .form-row label { 
    font-size: 13px !important; 
    font-weight: bold !important; 
    color: #555 !important; 
    margin-bottom: 8px !important; 
    display: block !important;
}

.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea { 
    width: 100% !important; 
    padding: 14px !important; 
    border: 1px solid #ddd !important; 
    border-radius: 8px !important; 
    background-color: #f9f9f9 !important; 
    font-family: inherit !important; 
    font-size: 14px !important; 
    transition: 0.3s !important;
}

.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus { 
    border-color: #ef394e !important; 
    background-color: #fff !important; 
    outline: none !important; 
    box-shadow: 0 0 0 3px rgba(239, 57, 78, 0.1) !important;
}

/* Two Columns for Form Inputs */
@media(min-width: 900px) {
    .woocommerce-checkout .form-row-first { width: 48% !important; float: right !important; clear: right !important;}
    .woocommerce-checkout .form-row-last { width: 48% !important; float: left !important; clear: left !important;}
    .woocommerce-checkout .form-row-wide { width: 100% !important; clear: both !important;}
}

/* --- Order Review Table --- */
.woocommerce-checkout-review-order-table { width: 100% !important; border-collapse: collapse !important; margin-bottom: 25px !important; }
.woocommerce-checkout-review-order-table th, 
.woocommerce-checkout-review-order-table td { padding: 15px 0 !important; border-bottom: 1px dashed #eee !important; font-size: 13px !important; text-align: right !important; }
.woocommerce-checkout-review-order-table thead th { font-weight: bold !important; color: #555 !important; border-bottom: 2px solid #eee !important;}
.woocommerce-checkout-review-order-table tbody td.product-name { color: #222 !important; font-weight: bold !important;}
.woocommerce-checkout-review-order-table tbody td.product-total { color: #555 !important; font-weight: bold !important; text-align: left !important;}
.woocommerce-checkout-review-order-table tfoot th { font-weight: normal !important; color: #555 !important; }
.woocommerce-checkout-review-order-table tfoot td { text-align: left !important; font-weight: bold !important; color: #222 !important; }
.woocommerce-checkout-review-order-table tfoot tr.order-total th { font-weight: bold !important; font-size: 16px !important; color: #111 !important;}
.woocommerce-checkout-review-order-table tfoot tr.order-total td { font-weight: bold !important; font-size: 20px !important; color: #ce1a5e !important;}

/* --- Custom Checkbox (Keep in Stock) --- */
.yk-custom-checkout-field {
    background: #f0f8ff !important;
    border: 1px solid #cce5ff !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin: 20px 0 !important;
}
.yk-keep-in-stock-checkbox label.checkbox { 
    color: #004085 !important; 
    font-weight: bold !important; 
    font-size: 13px !important; 
    cursor: pointer !important; 
    display: block !important; 
    position: relative !important;
    padding-right: 30px !important; 
    text-align: right !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}
.yk-keep-in-stock-checkbox input[type="checkbox"] { 
    width: 18px !important; 
    height: 18px !important; 
    cursor: pointer !important; 
    position: absolute !important; 
    right: 0 !important;
    top: 2px !important;
    margin: 0 !important;
}
.yk-keep-in-stock-checkbox .optional { display: none !important; }

/* --- Payment Methods --- */
#payment { background: transparent !important; border-radius: 0 !important; padding: 0 !important;}
#payment ul.payment_methods { border-bottom: none !important; padding: 0 !important; margin: 0 0 25px 0 !important; list-style: none !important; }
#payment ul.payment_methods li { background: #f9f9f9 !important; border: 1px solid #eee !important; border-radius: 8px !important; padding: 15px !important; margin-bottom: 10px !important; }
#payment ul.payment_methods li input { margin-left: 10px !important; }
#payment ul.payment_methods li label { font-weight: bold !important; font-size: 14px !important; color: #111 !important; cursor: pointer !important; display: inline-block !important; margin: 0 !important;}
#payment div.payment_box { background: transparent !important; color: #666 !important; font-size: 12px !important; padding: 10px 0 0 0 !important; margin: 0 !important; box-shadow: none !important;}
#payment div.payment_box::before { display: none !important; }
.woocommerce-privacy-policy-text { font-size: 11px !important; color: #888 !important; margin-bottom: 20px !important; line-height: 1.6 !important; text-align: justify !important;}

/* --- Place Order Button --- */
#place_order { 
    width: 100% !important; 
    background: #ef394e !important; 
    color: #fff !important; 
    border: none !important; 
    padding: 18px !important; 
    border-radius: 8px !important; 
    font-size: 16px !important; 
    font-weight: bold !important; 
    cursor: pointer !important; 
    transition: 0.3s !important; 
    font-family: inherit !important;
}
#place_order:hover { background: #d32f41 !important; }

/* ==================================================
   MOBILE ADAPTATIONS (SMART FIX FOR SCROLLING)
   ================================================== */
@media (max-width: 900px) {
    /* 1. قطع اسکرول افقی فقط در بدنه اصلی (بدون آسیب به گریدها) */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* 2. تبدیل گرید دسکتاپ به یک ستون در موبایل */
    .yk-checkout-layout { 
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; 
        padding: 0 15px !important; /* فاصله از لبه‌های گوشی */
        margin-bottom: 100px !important; /* فضا برای منوی پایین موبایل */
    }

    /* 3. کنترل عرض کارت‌ها و فرم‌ها */
    .yk-checkout-card { 
        padding: 20px 15px !important; 
        width: 100% !important;
    }

    .woocommerce-checkout .form-row-first, 
    .woocommerce-checkout .form-row-last { 
        width: 100% !important; 
        float: none !important; 
    }

    /* 4. کنترل باکس کد تخفیف */
    .woocommerce-form-coupon { 
        flex-direction: column !important;
    }
    
    .woocommerce-form-coupon p.form-row-last { 
        width: 100% !important; 
        flex: none !important;
    }

    /* 5. رفع مهم‌ترین عامل اسکرول افقی: جدول سفارش! */
    .woocommerce-checkout-review-order-table {
        display: block !important; /* خارج کردن از حالت جدول صلب */
        overflow-x: auto !important; /* امکان اسکرول خود جدول به جای کل صفحه */
        white-space: nowrap !important; /* جلوگیری از شکستن کلمات درون جدول */
        -webkit-overflow-scrolling: touch !important;
    }
}






























/* ==================================================
   YELKIDS OUR STORY PAGE (BULLETPROOF TIMELINE)
   ================================================== */
.yk-story-page { font-family: inherit; direction: rtl; line-height: 1.8; overflow-x: hidden; background: #fff;}

/* --- Section 1: Hero --- */
.yk-story-hero {
    position: relative; width: 100%; height: 75vh; min-height: 520px;
    background: url('/wp-content/themes/yelkids-theme/assets/images/our-story/bala.png') no-repeat center center/cover;
    display: flex; align-items: center; justify-content: center;
}
.yk-story-hero .hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); }

/* 🔥 اصلاح باکس شیشه‌ای دسکتاپ (جمع‌وجورتر و پایین‌تر) 🔥 */
.yk-story-hero .hero-glass-box {
    position: relative; 
    background: rgba(174, 174, 174, 0.24); 
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(12px);
    padding: 30px 35px; /* پدینگ کمتر برای کوچک‌تر شدن باکس */
    border-radius: 20px; 
    max-width: 520px; /* کاهش عرض از 650 به 520 */
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.4);
    margin-top: 200px; /* انتقال باکس به سمت پایین‌تر تا روی صورت کودک نیفتد */
    border: 1px solid rgba(255, 255, 255, 0.6); 
}

.yk-story-hero h1 { 
    color: #ef394e; 
    font-size: 20px; /* کاهش سایز فونت تیتر */
    margin: 0 0 12px 0; 
    font-weight: 800;
    text-shadow: 5px 0 5px 10px rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.yk-story-hero p { 
    color: #fff; 
    font-size: 14px; /* کاهش سایز فونت توضیحات */
    margin: 0;
    line-height: 1.8;
    font-weight: 500;
}

/* --- Section 2: Belief --- */
.yk-story-belief { display: flex; flex-wrap: wrap; align-items: center; max-width: 1100px; margin: 80px auto; padding: 0 20px; gap: 50px; }
.yk-story-belief .belief-text { flex: 1; min-width: 300px; }
.yk-story-belief h2 { font-size: 26px; color: #222; font-weight: bold; margin-bottom: 20px;}
.yk-story-belief .highlight-words {
    font-size: 20px; color: #ef394e; font-weight: bold; display: block; margin: 20px 0;
    background: #fff0f2; padding: 20px; border-radius: 12px; border-right: 4px solid #ef394e; line-height: 1.8;
}
.yk-story-belief .belief-image {
    flex: 1; min-width: 300px; height: 450px;
    background: url('/wp-content/themes/yelkids-theme/assets/images/our-story/vasat.png') no-repeat center center/cover;
    border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* --- Section 3: Values --- */
.yk-story-values { background: #f9f9f9; padding: 80px 20px; }
.yk-story-values .values-container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.yk-story-values .value-card { background: #fff; padding: 40px 30px; border-radius: 16px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; border-bottom: 4px solid transparent; }
.yk-story-values .value-card:hover { transform: translateY(-10px); border-bottom-color: #ef394e; }
.yk-story-values .value-icon { font-size: 45px; margin-bottom: 20px; }
.yk-story-values .value-card p { font-weight: bold; color: #555; margin: 0; font-size: 15px;}

/* --- Section 4: Magic Timeline (FLEXBOX OVERHAUL) --- */
.yk-story-timeline-sec { background: #111418; padding: 80px 20px 100px 20px; position: relative; overflow: hidden;}
.yk-story-timeline-sec .magic-intro { text-align: center; margin-bottom: 60px; }
.yk-story-timeline-sec .magic-glow-icon {
    color: #ef394e; margin-bottom: 20px; display: inline-block; animation: ykFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(239, 57, 78, 0.6));
}
@keyframes ykFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }

.yk-timeline-container { max-width: 1000px; margin: 0 auto; position: relative; }
.yk-timeline-line-center { position: absolute; width: 4px; background: #2c3e50; top: 0; bottom: 0; right: 50%; transform: translateX(50%); border-radius: 5px; }

.yk-timeline-row { display: flex; width: 100%; margin-bottom: 40px; position: relative; box-sizing: border-box; }
.yk-timeline-row.yk-row-right { justify-content: flex-start; } 
.yk-timeline-row.yk-row-left { justify-content: flex-end; }    

.yk-timeline-item { width: 50%; position: relative; box-sizing: border-box; }
.yk-timeline-row.yk-row-right .yk-timeline-item { padding-left: 40px; }
.yk-timeline-row.yk-row-left .yk-timeline-item { padding-right: 40px; }

.yk-timeline-icon {
    position: absolute; width: 54px; height: 54px; background: #111418; border: 3px solid #ef394e;
    top: 15px; border-radius: 50%; z-index: 10; display: flex; align-items: center; justify-content: center;
    color: #ef394e; box-shadow: 0 0 15px rgba(239, 57, 78, 0.4); box-sizing: border-box;
}

.yk-timeline-row.yk-row-right .yk-timeline-icon { left: -27px; } 
.yk-timeline-row.yk-row-left .yk-timeline-icon { right: -27px; }

.yk-timeline-content {
    padding: 30px; background: #1f2833; position: relative; border-radius: 15px; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; text-align: right; box-sizing: border-box;
}
.yk-timeline-content:hover { transform: translateY(-5px); border-color: #ef394e; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.yk-timeline-date { color: #ef394e; font-weight: bold; font-size: 18px; margin-bottom: 10px;}
.yk-timeline-content h3 { color: #fff; margin: 0 0 10px 0; font-size: 20px;}
.yk-timeline-content p { color: #ccc; margin: 0; font-size: 14px;}

/* --- Section 5: CTA --- */
.yk-story-cta { background: #ef394e; color: #fff; text-align: center; padding: 120px 20px; position: relative; }
.yk-story-cta .wave-top {
    position: absolute; top: -49px; left: 0; width: 100%; height: 50px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23ef394e" fill-opacity="1" d="M0,160L48,170.7C96,181,192,203,288,197.3C384,192,480,160,576,160C672,160,768,192,864,197.3C960,203,1056,181,1152,149.3C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat center bottom / cover;
}
.yk-story-cta h2 { font-size: 50px; font-weight: 900; margin: 0 0 20px 0; text-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.yk-story-cta p { font-size: 18px; max-width: 600px; margin: 0 auto 40px auto; opacity: 0.9;}
.yk-story-cta .btn-white {
    display: inline-block; background: #fff; color: #ef394e; padding: 15px 40px; border-radius: 50px;
    font-size: 16px; font-weight: bold; text-decoration: none; box-shadow: 0 10px 20px rgba(0,0,0,0.2); transition: 0.3s;
}
.yk-story-cta .btn-white:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 25px rgba(0,0,0,0.3); }

/* --- Mobile Specific Settings --- */
@media screen and (max-width: 768px) {
    
    /* 🔥 ۱. تصویر اختصاصی پس‌زمینه هیرو در موبایل 🔥 */
    .yk-story-hero {
        height: 60vh;
        min-height: 420px;
        /* لطفاً آدرس عکس موبایل آپلود شده در هاست را اینجا وارد کنید: */
        background: url('/wp-content/themes/yelkids-theme/assets/images/our-story/bala-mobile.png') no-repeat center center/cover !important;
    }

    /* 🔥 ۲. جمع‌وجور کردن کامل باکس شیشه‌ای هیرو در موبایل 🔥 */
    .yk-story-hero .hero-glass-box {
        padding: 20px 18px !important;
        max-width: 90% !important;
        margin-top: 350px !important;
        border-radius: 16px !important;
    }

    .yk-story-hero h1 { 
        font-size: 15px !important; 
        margin-bottom: 8px !important;
    }

    .yk-story-hero p { 
        font-size: 12px !important; 
        line-height: 1.6 !important;
    }

    .yk-story-belief { margin: 50px auto; }
    .yk-timeline-line-center { right: 30px; transform: none; }
    
    .yk-timeline-row { display: block; margin-bottom: 30px; }
    .yk-timeline-item { width: 100% !important; padding-right: 80px !important; padding-left: 0 !important; }
    
    .yk-timeline-row.yk-row-right .yk-timeline-icon, 
    .yk-timeline-row.yk-row-left .yk-timeline-icon {
        right: 3px; left: auto;
    }
    .yk-story-cta h2 { font-size: 35px; }
}



















































/* ==================================================
   YELKIDS CONTACT US PAGE (MODERN & STICKY)
   ================================================== */
.yk-contact-page { font-family: inherit; direction: rtl; background-color: #fdfdfd; padding: 60px 20px; line-height: 1.8; }
.yk-contact-container { max-width: 1200px; margin: 0 auto; }

/* Header */
.yk-contact-header-title { text-align: center; margin-bottom: 60px; }
.yk-contact-header-title h1 { font-size: 36px; font-weight: 900; color: #111; margin: 0 0 15px 0; }
.yk-contact-header-title h1 span { color: #ef394e; position: relative; display: inline-block; font-size: 33px;}
.yk-contact-header-title h1 span::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 6px; 
    background: rgba(239, 57, 78, 0.2); border-radius: 10px;
}
.yk-contact-header-title p { font-size: 16px; color: #666; max-width: 600px; margin: 0 auto; }

/* Layout Grid */
.yk-contact-grid { display: grid; grid-template-columns: 35% 60%; gap: 5%; align-items: start; }

/* --- Right Column (Sticky Info) --- */
.yk-sticky-column {
    position: sticky; 
    top: 100px; /* فاصله از بالای صفحه هنگام اسکرول */
    display: flex; flex-direction: column; gap: 20px;
}

.yk-info-card {
    background: #fff; border: 1px solid #eee; border-radius: 20px; padding: 25px;
    display: flex; gap: 20px; align-items: flex-start; box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s, box-shadow 0.3s;
}
.yk-info-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.06); border-color: #ef394e;}

.yk-info-icon {
    width: 50px; height: 50px; flex: 0 0 50px; background: #fff0f2; color: #ef394e;
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
}

.yk-info-content h3 { font-size: 17px; font-weight: bold; color: #222; margin: 0 0 10px 0; }
.yk-info-content p { font-size: 14px; color: #666; margin: 0 0 10px 0; line-height: 2; }
.yk-phone-number { display: inline-block; font-size: 15px; font-weight: bold; color: #ef394e; background: #fdfdfd; padding: 5px 8px; border-radius: 8px; border: 1px dashed #ef394e;}

.yk-social-box {
    background: #11111154; color: #fff; border-radius: 20px; padding: 30px; text-align: center; margin-top: 10px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.yk-social-box p { font-size: 14px; margin: 0 0 20px 0; color: #0b0404;}
.yk-social-links { display: flex; justify-content: center; gap: 15px; }
.yk-social-links a {
    width: 45px; height: 45px; background: rgba(255,255,255,0.1); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: 0.3s;
}
.yk-social-links a:hover { background: #ef394e; transform: scale(1.1); }

/* --- Left Column (Scrolling Form) --- */
.yk-contact-form-column { display: flex; flex-direction: column; gap: 30px; }

/* Gravity Forms Modern Styling Override */
.yk-contact-form-box { background: #fff; border: 1px solid #eee; border-radius: 24px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.04); height: 100%;}
.yk-contact-form-box h2 { font-size: 24px; font-weight: bold; color: #111; margin: 0 0 30px 0; }

.yk-gravity-form-wrapper .gform_wrapper { margin: 0 !important; }
.yk-gravity-form-wrapper .gform_heading { display: none !important; }
.yk-gravity-form-wrapper .gform_body { width: 100% !important; }
.yk-gravity-form-wrapper .gfield { margin-bottom: 25px !important; padding: 0 !important; }
.yk-gravity-form-wrapper .gfield_label { font-size: 14px !important; font-weight: bold !important; color: #555 !important; margin-bottom: 10px !important; display: block !important; }
.yk-gravity-form-wrapper .gfield_description { font-size: 12px !important; color: #888 !important; margin-bottom: 8px !important; }
.yk-gravity-form-wrapper .validation_message { color: #d32f41 !important; font-size: 12px !important; font-weight: bold !important; margin-top: 5px !important; padding: 5px 0 !important;}

/* Inputs Styling */
.yk-gravity-form-wrapper input[type="text"], 
.yk-gravity-form-wrapper input[type="tel"], 
.yk-gravity-form-wrapper input[type="email"], 
.yk-gravity-form-wrapper input[type="number"], 
.yk-gravity-form-wrapper textarea {
    width: 100% !important; padding: 16px 20px !important; background: #f9f9f9 !important; border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important; font-family: inherit !important; font-size: 15px !important; color: #333 !important; transition: 0.3s !important; box-sizing: border-box !important;
}
.yk-gravity-form-wrapper input:focus, .yk-gravity-form-wrapper textarea:focus {
    border-color: #ef394e !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(239, 57, 78, 0.1) !important; outline: none !important;
}

/* Button Styling */
.yk-gravity-form-wrapper .gform_footer { padding: 0 !important; margin-top: 15px !important; border: none !important;}
.yk-gravity-form-wrapper input[type="submit"], .yk-gravity-form-wrapper button[type="submit"] {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ef394e !important; color: #fff !important; border: none !important;
    padding: 16px 40px !important; border-radius: 12px !important; font-size: 16px !important; font-weight: bold !important; cursor: pointer !important; transition: 0.3s !important; font-family: inherit !important; width: auto !important;
}
.yk-gravity-form-wrapper input[type="submit"]:hover, .yk-gravity-form-wrapper button[type="submit"]:hover { background: #d32f41 !important; transform: translateY(-3px) !important; box-shadow: 0 10px 20px rgba(239, 57, 78, 0.3) !important; }

/* 🔥 Maps Styling: Full Width Side-by-Side 🔥 */
.yk-maps-wrapper-full { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 30px; 
    margin-top: 60px; /* ایجاد فاصله از بخش بالایی (فرم و کانتکت) */
}
.yk-map-box { background: #fff; border: 1px solid #eee; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.yk-map-title { padding: 15px 20px; font-size: 14px; font-weight: bold; color: #222; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f5f5f5; }
.yk-map-title svg { color: #ef394e; flex-shrink: 0;}
.yk-iframe-container { width: 100%; height: 350px; background: #f5f5f5; } /* افزایش ارتفاع نقشه برای عریض شدن */
.yk-iframe-container iframe { width: 100%; height: 100%; filter: grayscale(20%); transition: 0.3s; }
.yk-iframe-container iframe:hover { filter: grayscale(0%); }

/* 🔥 Mobile Adaptations: Standardized and Responsive 🔥 */
@media screen and (max-width: 900px) {
    .yk-contact-grid { 
        grid-template-columns: 100%; 
        gap: 30px; 
    }
    .yk-sticky-column { position: static; } /* حذف حالت چسبان در موبایل */
    .yk-contact-header-title h1 { font-size: 28px; }
    .yk-contact-form-box { padding: 25px; }
    
    /* نقشه‌ها در موبایل زیر هم قرار می‌گیرند */
    .yk-maps-wrapper-full { 
        grid-template-columns: 100%; 
        gap: 20px; 
        margin-top: 40px;
    }
}







































/* ==================================================
   YELKIDS BLOG ARCHIVE PAGE (MODERN MAGAZINE)
   ================================================== */
.yk-blog-archive-page { font-family: inherit; direction: rtl; background-color: #f9f9f9; padding-bottom: 80px; }

/* --- 1. Hero Section --- */
.yk-blog-hero {
    background: linear-gradient(135deg, #ef394e 0%, #d32f41 100%);
    padding: 80px 20px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.yk-blog-hero::before, .yk-blog-hero::after {
    content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.05);
}
.yk-blog-hero::before { width: 300px; height: 300px; top: -100px; right: -50px; }
.yk-blog-hero::after { width: 200px; height: 200px; bottom: -50px; left: 10%; }

.yk-blog-hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.yk-blog-hero-content h1 { font-size: 40px; font-weight: 900; margin: 0 0 15px 0; }
.yk-blog-hero-content h1 span { color: #ffe6e9; }
.yk-blog-hero-content p { font-size: 18px; margin: 0 0 40px 0; opacity: 0.9; }

/* Search Box */
.yk-blog-search-box { max-width: 500px; margin: 0 auto; }
.yk-custom-search-form { display: flex; position: relative; }
.yk-search-field {
    width: 100%; padding: 20px 25px; border: none; border-radius: 50px;
    font-family: inherit; font-size: 15px; color: #333; outline: none;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); transition: 0.3s;
}
.yk-search-field:focus { box-shadow: 0 15px 35px rgba(0,0,0,0.2); }
.yk-search-submit {
    position: absolute; left: 8px; bottom: 8px;
    background: #ef394e; color: #fff; border: none; border-radius: 50px;
    width: 45px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s;
}
.yk-search-submit:hover { background: #d32f41; transform: scale(1.05); top: 20px;}

/* --- 2. Blog Grid --- */
.yk-blog-container { max-width: 1200px; margin: -40px auto 0 auto; padding: 0 20px; position: relative; z-index: 10; }
.yk-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

/* --- 3. Blog Card --- */
.yk-blog-card {
    background: #fff; border-radius: 24px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); transition: 0.4s ease;
    display: flex; flex-direction: column;
}
.yk-blog-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(239, 57, 78, 0.08); }

/* Thumbnail */
.yk-post-thumb { position: relative; width: 100%; height: 240px; overflow: hidden; }
.yk-post-thumb a { display: block; width: 100%; height: 100%; }
.yk-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.yk-blog-card:hover .yk-post-thumb img { transform: scale(1.08); }
.yk-no-thumb { width: 100%; height: 100%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #ccc; font-weight: bold; font-size: 24px;}

/* Category Badge */
.yk-post-category-badge { position: absolute; top: 15px; right: 15px; z-index: 2; }
.yk-post-category-badge a {
    background: rgba(255,255,255,0.9); backdrop-filter: blur(5px);
    color: #ef394e; padding: 6px 15px; border-radius: 20px; font-size: 12px; font-weight: bold;
    text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: 0.3s;
}
.yk-post-category-badge a:hover { background: #ef394e; color: #fff; }

/* Content */
.yk-post-content { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.yk-post-meta { display: flex; gap: 15px; margin-bottom: 15px; font-size: 12px; color: #888; }
.yk-post-meta span { display: flex; align-items: center; gap: 5px; }
.yk-post-title { font-size: 18px; font-weight: bold; margin: 0 0 15px 0; line-height: 1.5; }
.yk-post-title a { color: #111; text-decoration: none; transition: 0.3s; }
.yk-post-title a:hover { color: #ef394e; }
.yk-post-excerpt { font-size: 14px; color: #666; line-height: 1.7; margin: 0 0 20px 0; flex: 1; }

/* Footer / Read More */
.yk-post-footer { padding-top: 15px; border-top: 1px dashed #eee; display: flex; align-items: center; }
.yk-read-more {
    display: inline-flex; align-items: center; gap: 8px; color: #ef394e;
    font-size: 14px; font-weight: bold; text-decoration: none; transition: 0.3s;
}
.yk-read-more:hover { color: #d32f41; gap: 12px; }

/* --- 4. Pagination --- */
.yk-pagination-wrapper { margin-top: 50px; text-align: center; }
.nav-links { display: inline-flex; align-items: center; gap: 10px; background: #fff; padding: 10px; border-radius: 50px; box-shadow: 0 10px 20px rgba(0,0,0,0.03);}
.nav-links .page-numbers {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #555; text-decoration: none; font-weight: bold; font-size: 15px; transition: 0.3s;
}
.nav-links .page-numbers:hover { background: #fff0f2; color: #ef394e; }
.nav-links .page-numbers.current { background: #ef394e; color: #fff; }
.nav-links .prev, .nav-links .next { width: auto; padding: 0 15px; border-radius: 50px; }

/* Empty State */
.yk-no-posts-found { background: #fff; border-radius: 24px; padding: 80px 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.04);}
.yk-no-posts-found h2 { font-size: 24px; color: #111; margin: 20px 0 10px 0; }
.yk-no-posts-found p { font-size: 15px; color: #666; }

/* --- Mobile Specific --- */
@media screen and (max-width: 768px) {
    .yk-blog-hero { padding: 60px 20px 80px 20px; }
    .yk-blog-hero-content h1 { font-size: 30px; }
    .yk-blog-grid { grid-template-columns: 100%; gap: 20px; }
    .nav-links { gap: 5px; }
    .nav-links .page-numbers { width: 35px; height: 35px; font-size: 14px;}
}



































/* ==================================================
   YELKIDS SINGLE POST PAGE (FLOATING CARD DESIGN)
   ================================================== */
.yk-single-post-page { font-family: inherit; direction: rtl; background-color: #fdfdfd; padding-bottom: 60px; }

/* --- 1. Hero Section --- */
.yk-single-hero {
    position: relative; width: 100%; height: 50vh; min-height: 350px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.yk-single-hero .yk-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
}

/* --- 2. Floating Header Card --- */
.yk-single-header-card {
    position: relative; z-index: 10;
    max-width: 900px; margin: -100px auto 0 auto;
    background: #fff; border-radius: 24px; padding: 40px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); text-align: center;
    border: 1px solid #f0f0f0;
}
.yk-post-cats { margin-bottom: 15px; }
.yk-post-cats a {
    background: #fff0f2; color: #ef394e; padding: 6px 15px; border-radius: 20px;
    font-size: 13px; font-weight: bold; text-decoration: none; transition: 0.3s; margin: 0 5px;
}
.yk-post-cats a:hover { background: #ef394e; color: #fff; }
.yk-single-title { font-size: 32px; font-weight: 900; color: #111; margin: 0 0 25px 0; line-height: 1.5; }
.yk-single-meta { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; border-top: 1px dashed #eee; padding-top: 20px;}
.yk-meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #666; }
.yk-meta-item svg { color: #ef394e; }

/* --- 3. Main Content Typography --- */
.yk-single-content-wrapper { max-width: 800px; margin: 40px auto; padding: 0 20px; }
.yk-single-content { font-size: 17px; line-height: 2; color: #333; }
.yk-single-content p { margin-bottom: 25px; line-height: 2.7; }
.yk-single-content h2, .yk-single-content h3, .yk-single-content h4 { color: #111; font-weight: bold; margin: 40px 0 20px 0; }
.yk-single-content h2 { font-size: 26px; }
.yk-single-content h3 { font-size: 22px; }
.yk-single-content img { max-width: 100%; height: auto; border-radius: 16px; margin: 25px 0; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.yk-single-content a { color: #ef394e; text-decoration: none; font-weight: bold; }
.yk-single-content a:hover { text-decoration: underline; }
.yk-single-content ul, .yk-single-content ol { margin-bottom: 25px; padding-right: 25px; }
.yk-single-content li { margin-bottom: 10px; }

/* Blockquote Styling */
.yk-single-content blockquote {
    margin: 30px 0; padding: 25px 30px 25px 25px; background: #fdf5f6;
    border-right: 5px solid #ef394e; border-radius: 12px 0 0 12px;
    font-size: 19px; font-style: italic; color: #555; position: relative;
}

/* Tags & Author */
.yk-single-tags { margin: 40px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
.yk-single-tags a { background: #f1f1f1; color: #555; padding: 5px 15px; border-radius: 20px; font-size: 13px; text-decoration: none; transition: 0.3s;}
.yk-single-tags a:hover { background: #ef394e; color: #fff; }

.yk-author-box {
    display: none; gap: 20px; align-items: center; background: #fff; padding: 30px;
    border-radius: 16px; border: 1px solid #eee; box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}
.yk-author-avatar img { border-radius: 50%; width: 80px; height: 80px; }
.yk-author-info h4 { margin: 0 0 5px 0; font-size: 18px; color: #111; }
.yk-author-info p { margin: 0; font-size: 14px; color: #666; line-height: 1.6; }

/* --- 4. Related Posts --- */
.yk-related-posts-section { background: #f9f9f9; padding: 60px 20px; border-top: 1px solid #eee; }
.yk-related-container { max-width: 1200px; margin: 0 auto; }
.yk-related-container h3 { font-size: 24px; font-weight: bold; margin: 0 0 30px 0; color: #111; text-align: right;}
.yk-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.yk-related-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.04); transition: 0.3s; }
.yk-related-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.yk-related-thumb { height: 180px; overflow: hidden; }
.yk-related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
.yk-related-card:hover .yk-related-thumb img { transform: scale(1.05); }
.yk-related-content { padding: 20px; }
.yk-related-content h4 { margin: 0 0 10px 0; font-size: 16px; line-height: 1.5; }
.yk-related-content a { color: #222; text-decoration: none; transition: 0.3s; }
.yk-related-content a:hover { color: #ef394e; }
.yk-related-date { font-size: 12px; color: #888; }

/* --- 5. Comments Section --- */
.yk-comments-section { max-width: 800px; margin: 60px auto 0 auto; padding: 0 20px; }
.yk-comments-container { background: #fff; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #eee;}

/* Mobile Rules */
@media screen and (max-width: 768px) {
    .yk-single-header-card { margin: -50px 20px 0 20px; padding: 30px 20px; }
    .yk-single-title { font-size: 14px; line-height: 2.4; }
    .yk-single-meta { flex-direction: column; gap: 10px; align-items: center; }
    .yk-single-content { font-size: 15px; }
    .yk-author-box { flex-direction: column; text-align: center; }
    .yk-related-content a {
  color: #222;
  text-decoration: none;
  transition: 0.3s;
  font-size: 12px;
}
}









/* ==================================================
   HOME PAGE BLOG SECTION (LATEST POSTS)
   ================================================== */
.yk-home-blog-section {
    padding: 0 0 60px;
    background: transparent;
}
.yk-home-blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}
.yk-home-blog-header .yk-main-title {
    margin-bottom: 0;
    font-size: 24px;
}
.yk-home-blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.yk-home-blog-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #f3f3f3;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.yk-home-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(17, 17, 17, 0.08);
}
.yk-home-blog-card .yk-post-thumb {
    height: 180px;
    position: relative;
    overflow: hidden;
}
.yk-home-blog-card .yk-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.yk-home-blog-card:hover .yk-post-thumb img {
    transform: scale(1.05);
}
.yk-home-blog-card .yk-post-category-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}
.yk-home-blog-card .yk-post-category-badge a {
    background: rgba(255,255,255,0.9);
    color: #e91e63;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.yk-home-blog-card .yk-post-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.yk-home-blog-card .yk-post-date {
    font-size: 11px;
    color: #8a8a8a;
    margin-bottom: 8px;
}
.yk-home-blog-card .yk-post-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    margin: 0 0 15px;
}
.yk-home-blog-card .yk-post-title a {
    color: #222;
    text-decoration: none;
    transition: color 0.3s;
}
.yk-home-blog-card .yk-post-title a:hover {
    color: #e91e63;
}
.yk-home-blog-card .yk-read-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #e91e63;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}
.yk-home-blog-card .yk-read-more span {
    font-size: 16px;
    transform: translateY(1px);
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .yk-home-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .yk-home-blog-header {
        align-items: center;
    }
    .yk-home-blog-header .yk-main-title {
        font-size: 20px;
    }
    .yk-home-blog-grid {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 15px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* فایرفاکس */
    }
    .yk-home-blog-grid::-webkit-scrollbar {
        display: none; /* کروم و سافاری */
    }
    .yk-home-blog-card {
        flex: 0 0 260px;
        scroll-snap-align: start;
    }
}












@media (max-width: 768px) {
.yk-btn-primary{
  flex: 1;
  min-width: 100px;
  height: 12px;
  background: #ef394e !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 8px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: 0.3s !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-family: inherit !important;
  margin: 0 !important;
  padding-right: 5px !important;
  padding-left: 5px !important;
}
.yk-home-blog-card .yk-post-title a {
  color: #222;
  text-decoration: none;
  transition: color 0.3s;
  font-size: 9px;
}
.yk-home-blog-card .yk-read-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #e91e63;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}
}













/* ==================================================
   MOBILE MENU ACCORDION (SUBMENU TOGGLE)
   ================================================== */
.yk-mobile-menu .menu-item-has-children {
    position: relative;
}

/* فلش باز و بسته کردن */
.yk-submenu-toggle {
    position: absolute;
    left: 10px; /* چسبیده به سمت چپ */
    top: 6px;
    background: #f7f7f7;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease;
    z-index: 10;
}

.yk-submenu-toggle:hover {
    background: #ef394e;
    color: #fff;
}

/* فاصله دادن به لینک برای اینکه زیر دکمه نرود */
.yk-mobile-menu .menu-item-has-children > a {
    padding-left: 50px !important; 
}

/* مخفی کردن پیش‌فرض زیرمنوها */
.yk-mobile-menu .sub-menu {
    display: none;
    padding-right: 15px !important; /* تو رفتگی برای راست‌چین */
    border-right: 2px solid #ef394e; /* یک خط رنگی برای زیبایی */
    margin-right: 10px;
    background: #fdfdfd;
    border-radius: 0 0 12px 12px;
}

/* استایل زمانی که زیرمنو باز است */
.yk-mobile-menu .yk-submenu-active > .sub-menu {
    display: block;
    animation: ykFadeInMenu 0.3s ease;
}

/* چرخیدن فلش */
.yk-submenu-active > .yk-submenu-toggle {
    transform: rotate(180deg);
    background: #ef394e;
    color: #fff;
}

@keyframes ykFadeInMenu {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}




























/* ==================================================
   DIGIKALA STYLE - WOOCOMMERCE MY ACCOUNT
   ================================================== */

.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* جلوگیری قاطع از رفتن به خط بعد */
    align-items: flex-start !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
}

/* --- منوی سمت راست --- */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 28% !important;
    flex: 0 0 28% !important; /* قفل کردن عرض منو */
    float: none !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #f9f9f9;
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    position: relative;
}

.woocommerce-MyAccount-navigation li a::before {
    content: "■";
    font-family: inherit;
    margin-left: 10px;
    color: #ccc;
    font-size: 10px;
}

.woocommerce-MyAccount-navigation li:hover a {
    color: #ef394e;
    background: #fdfdfd;
}

.woocommerce-MyAccount-navigation li.is-active a {
    color: #ef394e;
    font-weight: 800;
    background: #fff0f2;
}

.woocommerce-MyAccount-navigation li.is-active a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ef394e;
    border-radius: 4px 0 0 4px;
}

.woocommerce-MyAccount-navigation li.is-active a::before {
    color: #ef394e;
}

/* --- محتوای سمت چپ --- */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 72% !important;
    flex: 1 !important; /* اشغال تمام فضای باقیمانده */
    float: none !important;
    margin: 0 !important;
}

.yk-digikala-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.yk-dash-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
}

.yk-dash-avatar img {
    border-radius: 50%;
    border: 2px solid #eee;
}

.yk-dash-user-info h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: bold;
}

.yk-dash-user-info p {
    margin: 0;
    color: #888;
    font-size: 14px;
}

.yk-edit-profile-btn {
    margin-right: auto;
    color: #111;
    transition: 0.3s;
}
.yk-edit-profile-btn:hover { color: #ef394e; }

/* باکس‌های داشبورد */
.yk-dash-box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    padding: 25px;
}

.yk-dash-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 15px;
}

.yk-dash-box-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.yk-dash-box-header a {
    font-size: 12px;
    color: #00b4ff;
    text-decoration: none;
    font-weight: bold;
}

/* وضعیت سفارشات */
.yk-status-grid {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.yk-status-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    padding: 10px;
    transition: 0.3s;
    border-radius: 12px;
}

.yk-status-item:hover {
    background: #f9f9f9;
}

.yk-status-icon img {
    width: 60px;
    height: 60px;
}

.yk-status-text {
    display: flex;
    flex-direction: column;
}

.yk-count {
    font-weight: bold;
    font-size: 15px;
    color: #222;
}

.yk-label {
    font-size: 12px;
    color: #888;
}

/* خریدهای پرتکرار */
.yk-freq-bought-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.yk-freq-item {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: 0.3s;
}

.yk-freq-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.yk-freq-item a {
    text-decoration: none;
    color: inherit;
}

.yk-freq-thumb img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.yk-freq-item h5 {
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 10px 0;
    color: #444;
}

.yk-freq-price {
    font-weight: bold;
    color: #ef394e;
    font-size: 14px;
    margin-bottom: 15px;
}

.yk-add-to-cart-dash {
    display: block;
    border: 1px solid #ef394e;
    color: #ef394e;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    transition: 0.3s;
}

.yk-freq-item:hover .yk-add-to-cart-dash {
    background: #ef394e;
    color: #fff;
}

/* تب‌های اختصاصی */
.yk-custom-endpoint-box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    padding: 30px;
}

/* ریسپانسیو اختصاصی دیجی‌کالا برای موبایل */
@media screen and (max-width: 900px) {
    .woocommerce-account .woocommerce {
        flex-direction: column !important;
        padding: 0 15px !important;
    }
    
    .woocommerce-account .woocommerce-MyAccount-navigation, 
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        flex: none !important;
    }
    
    .woocommerce-account .woocommerce-MyAccount-navigation {
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        background: #fff;
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    
    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }
    
    .woocommerce-MyAccount-navigation li {
        border-bottom: none;
        border-left: 1px solid #f0f0f0;
        scroll-snap-align: start;
    }
    
    .woocommerce-MyAccount-navigation li a {
        padding: 15px 20px;
    }
    
    .woocommerce-MyAccount-navigation li.is-active a::after {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3px;
        border-radius: 4px 4px 0 0;
    }
    
    .yk-status-grid {
        flex-direction: column;
    }
    
    .yk-freq-bought-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}









/* ==================================================
   WOOCOMMERCE MY ACCOUNT - LEFT CONTENT STYLING
   ================================================== */

/* --- استایل فرم‌ها (جزئیات حساب، آدرس‌ها و ...) --- */
.woocommerce-MyAccount-content form {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}

.woocommerce-MyAccount-content .form-row {
    margin-bottom: 20px;
}

.woocommerce-MyAccount-content .form-row label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: #444;
    font-size: 13px;
}

.woocommerce-MyAccount-content .form-row label .required {
    color: #ef394e;
    text-decoration: none;
}

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"] {
    width: 100%;
    padding: 15px 20px;
    border-radius: 14px;
    border: 1px solid #e8e8e8;
    background: #fafafa;
    font-family: inherit;
    font-size: 14px;
    color: #333;
    transition: 0.3s;
    box-sizing: border-box;
}

.woocommerce-MyAccount-content input:focus {
    border-color: #ef394e;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(239, 57, 78, 0.1);
    outline: none;
}

/* دو ستونه کردن نام و نام خانوادگی */
.woocommerce-MyAccount-content .form-row-first { width: 48%; float: right; }
.woocommerce-MyAccount-content .form-row-last { width: 48%; float: left; }
.woocommerce-MyAccount-content .clear { clear: both; }

/* باکس تغییر رمز عبور */
.woocommerce-EditAccountForm fieldset {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 25px 30px;
    margin-top: 40px;
    margin-bottom: 10px;
}

.woocommerce-EditAccountForm fieldset legend {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    padding: 0 15px;
}

/* دکمه‌های فرم‌ها */
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button {
    background: #ef394e;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 35px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    font-family: inherit;
    display: inline-block;
}

.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .button:hover {
    background: #d32f41;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 57, 78, 0.25);
}

/* --- استایل بخش آدرس‌ها --- */
.woocommerce-MyAccount-content > p {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
}

.woocommerce-Addresses {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.woocommerce-Address {
    flex: 1;
    min-width: 280px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    position: relative;
    transition: 0.3s;
}

.woocommerce-Address:hover {
    border-color: #ffe6e9;
    box-shadow: 0 10px 30px rgba(239, 57, 78, 0.05);
}

.woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.woocommerce-Address-title h3 {
    margin: 0;
    font-size: 18px;
    color: #111;
    font-weight: 800;
}

.woocommerce-Address-title .edit {
    color: #ef394e;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    background: #fff0f2;
    padding: 6px 15px;
    border-radius: 8px;
    transition: 0.3s;
}

.woocommerce-Address-title .edit:hover {
    background: #ef394e;
    color: #fff;
}

.woocommerce-Address address {
    font-style: normal;
    color: #666;
    line-height: 2.2;
    font-size: 14px;
}

/* --- استایل جدول سفارشات --- */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    margin-top: 15px;
}

.woocommerce-orders-table th {
    background: #fafafa;
    padding: 20px 15px;
    text-align: right;
    color: #333;
    font-size: 14px;
    font-weight: 800;
    border-bottom: 1px solid #eee;
}

.woocommerce-orders-table td {
    padding: 18px 15px;
    border-bottom: 1px solid #f9f9f9;
    color: #555;
    font-size: 14px;
    vertical-align: middle;
}

.woocommerce-orders-table tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-orders-table tbody tr:hover td {
    background: #fffdfd;
}

/* دکمه‌های اکشن در جدول (نمایش، پرداخت و ...) */
.woocommerce-orders-table .button {
    background: transparent;
    color: #00b4ff;
    border: 1px solid #00b4ff;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: none;
}

.woocommerce-orders-table .button:hover {
    background: #00b4ff;
    color: #fff;
    transform: translateY(0);
}

/* --- استایل پیام‌ها (Notices) --- */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    background: #fff;
    border: 1px solid #eee;
    border-right: 4px solid #00b4ff;
    border-radius: 12px;
    padding: 18px 25px;
    color: #333;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.woocommerce-error { border-right-color: #ef394e; }
.woocommerce-message { border-right-color: #10b981; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    margin-right: auto;
    padding: 8px 20px;
    font-size: 13px;
}

/* موبایل برای محتوای چپ */
@media screen and (max-width: 768px) {
    .woocommerce-MyAccount-content .form-row-first,
    .woocommerce-MyAccount-content .form-row-last {
        width: 100%;
        float: none;
    }
    
    .woocommerce-MyAccount-content form {
        padding: 20px;
    }
    
    .woocommerce-orders-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}









/* ==================================================
   YITH WISHLIST STYLING FIX (MY ACCOUNT)
   ================================================== */
.woocommerce-MyAccount-content .wishlist-title h2,
.woocommerce-MyAccount-content .wishlist-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #111 !important;
    margin-bottom: 25px !important;
    text-align: right !important;
}

.woocommerce-MyAccount-content .wishlist_table {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    font-size: 13px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.woocommerce-MyAccount-content .wishlist_table th {
    background: #fafafa;
    color: #333;
    font-weight: 800;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    text-align: right;
}

.woocommerce-MyAccount-content .wishlist_table td {
    padding: 15px 20px;
    border-bottom: 1px dashed #f5f5f5;
    vertical-align: middle;
    color: #555;
}

.woocommerce-MyAccount-content .wishlist_table tr:last-child td {
    border-bottom: none;
}

.woocommerce-MyAccount-content .wishlist_table td.product-name a {
    color: #111;
    font-weight: bold;
    text-decoration: none;
}

.woocommerce-MyAccount-content .wishlist_table td.product-name a:hover {
    color: #ef394e;
}

.woocommerce-MyAccount-content .wishlist_table .add_to_cart {
    background: #ef394e !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 8px 15px !important;
    font-weight: bold !important;
}




















/* ==================================================
   DIGIKALA STYLE - WOOCOMMERCE MY ACCOUNT
   ================================================== */

.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* جلوگیری قاطع از رفتن به خط بعد در دسکتاپ */
    align-items: flex-start !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
}

/* --- منوی سمت راست --- */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 28% !important;
    flex: 0 0 28% !important; /* قفل کردن عرض منو */
    float: none !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #f9f9f9;
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    padding: 18px 25px;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    position: relative;
}

.woocommerce-MyAccount-navigation li a::before {
    content: "■";
    font-family: inherit;
    margin-left: 10px;
    color: #ccc;
    font-size: 10px;
}

.woocommerce-MyAccount-navigation li:hover a {
    color: #ef394e;
    background: #fdfdfd;
}

.woocommerce-MyAccount-navigation li.is-active a {
    color: #ef394e;
    font-weight: 800;
    background: #fff0f2;
}

.woocommerce-MyAccount-navigation li.is-active a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ef394e;
    border-radius: 4px 0 0 4px;
}

.woocommerce-MyAccount-navigation li.is-active a::before {
    color: #ef394e;
}

/* --- محتوای سمت چپ --- */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 72% !important;
    flex: 1 !important; /* اشغال تمام فضای باقیمانده */
    float: none !important;
    margin: 0 !important;
}

.yk-digikala-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.yk-dash-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
}

.yk-dash-avatar img {
    border-radius: 50%;
    border: 2px solid #eee;
}

.yk-dash-user-info h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: bold;
}

.yk-dash-user-info p {
    margin: 0;
    color: #888;
    font-size: 14px;
}

.yk-edit-profile-btn {
    margin-right: auto;
    color: #111;
    transition: 0.3s;
}
.yk-edit-profile-btn:hover { color: #ef394e; }

/* باکس‌های داشبورد */
.yk-dash-box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    padding: 25px;
}

.yk-dash-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 15px;
}

.yk-dash-box-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.yk-dash-box-header a {
    font-size: 12px;
    color: #00b4ff;
    text-decoration: none;
    font-weight: bold;
}

/* وضعیت سفارشات */
.yk-status-grid {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.yk-status-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    padding: 10px;
    transition: 0.3s;
    border-radius: 12px;
}

.yk-status-item:hover {
    background: #f9f9f9;
}

.yk-status-icon img {
    width: 60px;
    height: 60px;
}

.yk-status-text {
    display: flex;
    flex-direction: column;
}

.yk-count {
    font-weight: bold;
    font-size: 15px;
    color: #222;
}

.yk-label {
    font-size: 12px;
    color: #888;
}

/* خریدهای پرتکرار */
.yk-freq-bought-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.yk-freq-item {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: 0.3s;
}

.yk-freq-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.yk-freq-item a {
    text-decoration: none;
    color: inherit;
}

.yk-freq-thumb img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.yk-freq-item h5 {
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 10px 0;
    color: #444;
}

.yk-freq-price {
    font-weight: bold;
    color: #ef394e;
    font-size: 14px;
    margin-bottom: 15px;
}

.yk-add-to-cart-dash {
    display: block;
    border: 1px solid #ef394e;
    color: #ef394e;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    transition: 0.3s;
}

.yk-freq-item:hover .yk-add-to-cart-dash {
    background: #ef394e;
    color: #fff;
}

/* تب‌های اختصاصی */
.yk-custom-endpoint-box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    padding: 30px;
}

/* --- موبایل: بازطراحی دقیق مشابه دیجی‌کالا --- */
@media screen and (max-width: 900px) {
    .woocommerce-account .woocommerce {
        flex-direction: column !important; /* تبدیل به ستونی */
        padding: 0 15px !important;
        gap: 15px !important;
    }
    
    /* جابجایی محتوا به بالای منو */
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        flex: none !important;
        order: 1 !important; /* محتوا بالا قرار میگیرد */
    }
    
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100% !important;
        flex: none !important;
        order: 2 !important; /* منو پایین قرار میگیرد */
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    /* منوی عمودی دیجی‌کالایی */
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 16px;
        border: 1px solid #f0f0f0;
        overflow: hidden;
    }
    
    .woocommerce-MyAccount-navigation li {
        border-bottom: 1px solid #f9f9f9;
        border-left: none;
    }
    
    .woocommerce-MyAccount-navigation li a {
        padding: 18px 20px;
        justify-content: space-between; /* فاصله بین متن و فلش */
    }
    
    /* اضافه کردن فلش سمت چپ */
    .woocommerce-MyAccount-navigation li a::after {
        content: "‹";
        font-family: inherit;
        font-size: 24px;
        color: #ccc;
        font-weight: 300;
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        border-radius: 0;
        display: block;
    }
    
    .woocommerce-MyAccount-navigation li.is-active a::after {
        color: #ef394e;
    }
    
    /* وضعیت سفارشات (افقی کنار هم) */
    .yk-status-grid {
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }
    
    .yk-status-item {
        flex-direction: column; /* آیکون بالا، متن پایین */
        text-align: center;
        padding: 10px 5px;
        flex: 1;
        gap: 8px;
    }
    
    .yk-status-icon img {
        width: 48px;
        height: 48px;
        margin: 0 auto;
    }
    
    .yk-status-text {
        align-items: center;
    }
    
    .yk-count {
        font-size: 13px;
    }
    
    .yk-label {
        font-size: 11px;
    }
    
    /* خریدهای پرتکرار */
    .yk-freq-bought-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* هدر کاربر */
    .yk-dash-header {
        padding: 20px;
    }
    
    .yk-dash-avatar img {
        width: 60px;
        height: 60px;
    }
}











/* ==================================================
   FIX: MOBILE SUBMENU POSITION & ALIGNMENT
   ================================================== */
.yk-mobile-navigation .yk-mobile-menu .sub-menu {
    position: static !important; /* ابطال حالت شناور (absolute) دسکتاپ */
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-right: 2px solid #ef394e !important; /* خط راهنمای زیرمنو */
    border-radius: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 15px 5px 0 !important;
    direction: ltr;
    margin: 5px 15px 5px 0 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: none; /* این خط توسط اسکریپتی که قبلا دادم به block تبدیل میشود */
    text-align: right !important; /* راست‌چین کردن منو */
}

/* نمایش زیرمنو با کلیک */
.yk-mobile-navigation .yk-mobile-menu .yk-submenu-active > .sub-menu {
    display: block !important;
}

/* استایل لینک‌های داخل زیرمنو */
.yk-mobile-navigation .yk-mobile-menu .sub-menu a {
    text-align: right !important;
    justify-content: flex-start !important;
    padding: 10px 0 !important;
    color: #555 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* راست‌چین کردن لینک‌های اصلی منو */
.yk-mobile-navigation .yk-mobile-menu > li > a {
    text-align: right !important;
    justify-content: flex-start !important;
}

/* فاصله دادن به لینک والد برای قرارگیری دکمه فلش در سمت چپ */
.yk-mobile-menu .menu-item-has-children > a {
    padding-left: 50px !important;
}













/* ==================================================
   MOBILE BOTTOM APP NAVIGATION (YELKIDS) - UPDATED
   ================================================== */
.yk-bottom-nav {
    display: none !important;
}

@media (max-width: 900px) {
    body, html {
        padding-bottom: 90px !important; 
    }
    /* اگر قالب شما از یک نگهدارنده اصلی (مثل site-main یا content) استفاده می‌کند: */
    #primary, .site-main, .woocommerce {
        padding-bottom: 85px !important;
    }

    /* بالا بردن دکمه چسبان "افزودن به سبد خرید" در صفحه محصول */
    .yk-mobile-sticky-cart {
        bottom: 85px !important; /* قرارگیری دقیقاً بالای منوی موبایل */
        z-index: 9997 !important; /* زیر منوی اصلی موبایل بماند */
    }

    /* بالا بردن بخش مجموع سبد خرید (اگر دکمه پرداخت چسبان است) */
    .woocommerce-cart .cart-collaterals {
        margin-bottom: 90px !important;
    }
#add_payment_method .wc-proceed-to-checkout, .woocommerce-cart .wc-proceed-to-checkout, .woocommerce-checkout .wc-proceed-to-checkout {
    padding: 1em 0;
    margin-bottom: 41px;
}
    .yk-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        /* بک‌گراند با رنگ برند شما (قرمز/صورتی یل کیدز) به صورت شیشه‌ای */
        background: rgba(239, 57, 78, 0.88) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-radius: 22px !important;
        box-shadow: 0 10px 30px rgba(239, 57, 78, 0.3) !important;
        z-index: 9998 !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 6px !important;
        direction: rtl !important;
        flex-wrap: nowrap !important; /* جلوگیری قاطع از دو خط شدن */
        overflow: visible !important;
    }

    .yk-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: rgba(255, 255, 255, 0.7) !important; /* رنگ سفید ملایم برای آیکون‌های غیرفعال */
        font-size: 10px !important;
        font-weight: 600 !important;
        gap: 5px !important;
        padding: 10px 2px !important;
        border-radius: 16px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        font-family: inherit !important;
        flex: 1 !important; /* تقسیم دقیق و مساوی عرض بین هر 5 دکمه */
        min-width: 0 !important;
        white-space: nowrap !important; /* متن تحت هیچ شرایطی شکسته نشود */
    }

    .yk-nav-item svg {
        width: 20px !important;
        height: 20px !important;
        stroke: currentColor !important;
        margin-bottom: 2px !important;
    }

    /* --- باکس گلسی برای آیتم انتخاب شده --- */
    .yk-nav-item.active {
        background: rgba(255, 255, 255, 0.25) !important; /* شیشه سفید روی پس‌زمینه قرمز */
        color: #ffffff !important; /* سفید خالص */
        font-weight: 800 !important;
        box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1) !important;
    }

    .yk-nav-item.active svg {
        stroke-width: 2.5 !important;
    }

    .yk-nav-item:not(.active):hover {
        color: #ffffff !important;
    }

    /* --- نشانگر قرمز/سفید سبد خرید --- */
    .yk-nav-icon-badge {
        position: relative !important;
        display: flex !important;
    }

    .yk-nav-badge {
        position: absolute !important;
        top: -6px !important;
        right: -8px !important;
        background: #ffffff !important;
        color: #ef394e !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        width: 16px !important;
        height: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }
}

/* فونت ریزتر برای گوشی‌های خیلی باریک */
@media (max-width: 380px) {
    .yk-nav-item {
        font-size: 9px !important;
        padding: 8px 1px !important;
    }
    .yk-nav-item svg {
        width: 18px !important;
        height: 18px !important;
    }
}









/* ==================================================
   ISOLATED TEXT STYLE FOR BOTTOM NAV (FIX)
   ================================================== */
div.yk-bottom-nav .yk-nav-item span {
    font-size: 9px !important; /* این سایز فقط روی همین منو اعمال می‌شود */
    line-height: 1.5 !important;
    white-space: nowrap !important;
    display: block !important;
    letter-spacing: 0 !important;
}

/* برای گوشی‌های کمی باریک‌تر */
@media (max-width: 380px) {
    div.yk-bottom-nav .yk-nav-item span {
        font-size: 8px !important;
    }
}













/* Fullscreen Gallery */
.yk-fullscreen-modal { background: #000; }
.yk-fullscreen-modal .yk-modal-content { width: 100vw; height: 100vh; display: flex; flex-direction: column; position: relative;}
.yk-fullscreen-modal .yk-modal-header { display: flex; justify-content: center; padding: 20px; border-bottom: 1px solid #333; position: relative;}
.yk-fullscreen-modal .yk-close-modal { color: #fff; }
.yk-gallery-tabs { display: flex; gap: 10px; background: #222; padding: 5px; border-radius: 30px; }
.yk-tab-btn { background: transparent; border: none; color: #999; padding: 8px 25px; border-radius: 20px; font-size: 14px; cursor: pointer; transition: 0.3s; font-family: inherit;}
.yk-tab-btn.active { background: #fff; color: #000; font-weight: bold; }
.yk-tab-content { display: none; flex: 1; height: calc(100vh - 80px); }
.yk-tab-content.active { display: flex; flex-direction: column; }

.yk-gallery-main-swiper { flex: 1; width: 100%; height: 80%; }
.yk-gallery-main-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; }
.yk-gallery-main-swiper img { max-width: 90%; max-height: 90vh; object-fit: contain; }
.yk-nav-w { color: #fff !important; }

.yk-gallery-thumbs-swiper { height: 100px; padding: 10px; background: #111; box-sizing: border-box; }
.yk-gallery-thumbs-swiper .swiper-slide { width: 80px; height: 100%; opacity: 0.4; cursor: pointer; border-radius: 6px; overflow: hidden; border: 2px solid transparent;}
.yk-gallery-thumbs-swiper .swiper-slide-thumb-active { opacity: 1; border-color: #fff; }
.yk-gallery-thumbs-swiper img { width: 100%; height: 100%; object-fit: cover; }










/* استایل‌های اختصاصی برای تب‌های گالری (جلوگیری از تداخل) */
#yk-gallery-modal .yk-tab-btn.active {
    background: #fff !important;
    color: #111 !important;
}

#yk-gallery-modal .yk-tab-content {
    display: none !important;
}

#yk-gallery-modal .yk-tab-content.active {
    display: flex !important; /* یا block بسته به ساختار قبلی، flex بهتر است برای این ساختار */
}

/* استایل بند انگشتی‌ها در پاپ‌آپ */
#yk-gallery-modal .swiper-slide-thumb-active {
    opacity: 1 !important;
    border: 2px solid #fff;
}

#yk-gallery-modal .yk-close-modal:hover {
    background: rgba(255,255,255,0.3) !important;
    transform: scale(1.1);
}




















/* ==================================================
   🔥 THE ULTIMATE ANTI-SCROLL FIX FOR MOBILE 🔥
   ================================================== */
@media (max-width: 900px) {
    /* 1. رفع باگ معروف سافاری در موبایل و جلوگیری از باگ 100vw */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* 2. ایجاد یک کپسول محافظ دور کل محتوای تسویه حساب */
    body.woocommerce-checkout .yk-container,
    body.woocommerce-checkout .site-main,
    body.woocommerce-checkout #primary,
    body.woocommerce-checkout .woocommerce {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 3. خنثی کردن مارجین‌های منفی ووکامرس (عامل اصلی بیرون زدگی فرم‌ها) */
    .woocommerce-checkout .col2-set,
    .woocommerce-checkout .form-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    /* 4. شکستن متون طولانی بدون فاصله (مثل لینک‌ها و ایمیل‌ها) */
    .woocommerce-checkout * {
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
}