/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
/* ====== کد افکت رنگین‌کمان برای Top Bar ====== */

.whb-top-bar {
  position: relative; /* این برای جای‌گیری صحیح لایه رنگی لازمه */
  z-index: 0; /* برای اینکه محتوای Top Bar روی لایه رنگی بیفته */
  overflow: hidden; /* برای اینکه لایه رنگی از کادر Top Bar بیرون نزنه */
}

.whb-top-bar::before {
  content: ""; /* برای ایجاد شبه‌عنصر ضروریه */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* این باعث میشه لایه رنگی پشت محتوای Top Bar قرار بگیره */
  background: linear-gradient( /* ایجاد یک گرادینت خطی با رنگ‌های رنگین‌کمان */
    120deg, /* زاویه گرادینت */
    #FF0000, /* قرمز */
    #FFA500, /* نارنجی */
    #FFFF00, /* زرد */
    #008000, /* سبز */
    #0000FF, /* آبی */
    #4B0082, /* نیلی */
    #EE82EE, /* بنفش */
    #FF0000 /* تکرار قرمز برای حرکت نرم‌تر در انتها */
  );
  background-size: 300% 300%; /* اندازه پس‌زمینه رو بزرگتر می‌کنیم تا حرکت کنه */
  
  /* انیمیشن */
  animation-name: rainbowMovementWoodmart; /* اسم انیمیشن (کمی تغییر دادم که منحصر به فرد باشه) */
  animation-duration: 15s; /* مدت زمان یک دور کامل انیمیشن (ثانیه) - می‌تونی کم و زیادش کنی */
  animation-timing-function: linear; /* نوع حرکت انیمیشن (یکنواخت) */
  animation-iteration-count: infinite; /* تکرار بی‌نهایت انیمیشن */
}

/* تعریف خود انیمیشن */
@keyframes rainbowMovementWoodmart {
  0% {
    background-position: 0% 50%; /* شروع از موقعیت اولیه */
  }
  50% {
    background-position: 100% 50%; /* حرکت به موقعیت انتهایی */
  }
  100% {
    background-position: 0% 50%; /* بازگشت به موقعیت اولیه برای تکرار نرم */
  }
}

/* ====== پایان کد افکت رنگین‌کمان ====== */
/* ============================ */
/* ====== لوگوی دسکتاپ ====== */
/* ============================ */

/* نگهدارنده اصلی لوگوی دسکتاپ (معمولاً یک div با کلاس خاص) */
/* .whb-gs8bcnxektjsro21n657 {} */ /* فعلا نیازی به استایل برای این div نیست */

/* برای لینک (تگ <a>) دور عکس لوگوی دسکتاپ */
.whb-gs8bcnxektjsro21n657 a.wd-logo.wd-main-logo {
    display: inline-block !important; /* اجازه میده عرض و ارتفاع بگیره */
    width: 280px !important;          /* <<< عرض دلخواه لوگو برای دسکتاپ - این عدد رو می‌تونی تغییر بدی */
    height: auto !important;           /* ارتفاع خودکار برای حفظ نسبت */
    max-height: none !important;       /* برای لغو کردن max-height احتمالی از قالب */
}

/* برای خود عکس (تگ <img>) لوگوی دسکتاپ */
.whb-gs8bcnxektjsro21n657 a.wd-logo.wd-main-logo img {
    width: 100% !important;            /* عکس، تمام عرضِ والدش (تگ <a>) رو بگیره */
    max-width: 100% !important;        /* برای اطمینان */
    height: auto !important;           /* ارتفاع خودکار برای حفظ نسبت ابعاد عکس */
    max-height: none !important;       /* برای لغو کردن max-height:inherit از قالب */
    display: block !important;         /* برای جلوگیری از فضای خالی احتمالی زیر عکس */
}
/* =================================== */
/* ====== لوگوی موبایل و تبلت ====== */
/* =================================== */

@media (max-width: 1023px) { /* این استایل‌ها برای صفحه‌نمایش‌های با عرض ۱۰۲۳ پیکسل و کمتر اعمال میشن */

    /* نگهدارنده اصلی لوگوی موبایل (معمولاً یک div با کلاس خاص) */
    /* .whb-lt7vdqgaccmapftzurvt {} */ /* فعلا نیازی به استایل برای این div نیست */

    /* برای لینک (تگ <a>) دور عکس لوگوی موبایل */
    .whb-lt7vdqgaccmapftzurvt a.wd-logo.wd-main-logo {
        display: inline-block !important;
        width: 210px !important;          /* <<< عرض دلخواه لوگو برای موبایل - این عدد رو برای جلوگیری از روی هم افتادن تنظیم کن */
        height: auto !important;
        max-height: none !important;
    }

    /* برای خود عکس (تگ <img>) لوگوی موبایل */
    .whb-lt7vdqgaccmapftzurvt a.wd-logo.wd-main-logo img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
    }
}
/* تغییر فونت توضیحات اصلی و کامل محصول (داخل تب توضیحات) */
.woocommerce-Tabs-panel--description p {
    font-size: 20px !important; /* اندازه دلخواه فونت */
    line-height: 1.8 !important;   /* فاصله بین خطوط */
}
/*
 استایل‌دهی به کادر اطلاعات محصول بدون آسیب به سئو
 این کد فقط ظاهر را تغییر می‌دهد و محتوا را پنهان یا دستکاری نمی‌کند.
*/
.single-product div.summary.entry-summary {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}
/*
=====================================================
 بزرگ کردن فونت قیمت در صفحه داخلی محصول
 این کد فقط ظاهر را تغییر می‌دهد و برای سئو امن است.
=====================================================
*/
.single-product .summary p.price {
    /* اندازه فونت قیمت را مشخص می‌کند */
    font-size: 24px !important;   /* <<< می‌توانید این عدد را به دلخواه تغییر دهید */

    /* ضخامت فونت را بیشتر می‌کند تا برجسته‌تر به نظر برسد */
    font-weight: 700 !important; /* 700 معادل Bold است */
}