.elementor-421 .elementor-element.elementor-element-2b094af{--display:flex;--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-421 .elementor-element.elementor-element-62240a4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-421 .elementor-element.elementor-element-bd72cff{--display:flex;--border-radius:020px 020px 020px 020px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);--padding-top:30px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-421 .elementor-element.elementor-element-bd72cff:not(.elementor-motion-effects-element-type-background), .elementor-421 .elementor-element.elementor-element-bd72cff > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-421 .elementor-element.elementor-element-d93b08f{--display:flex;}.elementor-421 .elementor-element.elementor-element-ad551aa{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:20px 20px 0px 0px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);--margin-top:-9px;--margin-bottom:-50px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-421 .elementor-element.elementor-element-ad551aa:not(.elementor-motion-effects-element-type-background), .elementor-421 .elementor-element.elementor-element-ad551aa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#363636;}.elementor-421 .elementor-element.elementor-element-d3cdf50{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -13px) 0px;}.elementor-421 .elementor-element.elementor-element-d3cdf50 .woocommerce-breadcrumb{color:#272727;font-weight:600;}.elementor-421 .elementor-element.elementor-element-d3cdf50 .woocommerce-breadcrumb > a{color:#272727;}.elementor-421 .elementor-element.elementor-element-338c691{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:20px 20px 0px 0px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);--margin-top:0px;--margin-bottom:-33px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-421 .elementor-element.elementor-element-338c691:not(.elementor-motion-effects-element-type-background), .elementor-421 .elementor-element.elementor-element-338c691 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#ED2728;}.elementor-421 .elementor-element.elementor-element-e0d68c9 .elementor-heading-title{font-size:18px;font-weight:600;text-shadow:0px 0px 10px rgba(255, 255, 255, 0.48);color:#FFFFFF;}.elementor-421 .elementor-element.elementor-element-cb9663f{text-align:start;}.elementor-421 .elementor-element.elementor-element-3963521{--display:flex;}.elementor-421 .elementor-element.elementor-element-d4b6df8{text-align:center;}.elementor-421 .elementor-element.elementor-element-d4b6df8 .elementor-heading-title{font-weight:600;}.elementor-421 .elementor-element.elementor-element-075bdaf{text-align:center;}.elementor-421 .elementor-element.elementor-element-075bdaf .elementor-heading-title{font-size:17px;font-weight:600;}.elementor-421 .elementor-element.elementor-element-d9c4753 .elementor-button{background-color:#ED272800;font-size:20px;font-weight:900;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:10px 10px 10px 10px;padding:10px 10px 6px 10px;}.elementor-421 .elementor-element.elementor-element-d9c4753:hover{--e-transform-scale:1.02;}.elementor-421 .elementor-element.elementor-element-3e41778{--display:flex;}@media(max-width:767px){.elementor-421 .elementor-element.elementor-element-ad551aa{--padding-top:10px;--padding-bottom:25px;--padding-left:0px;--padding-right:0px;}.elementor-421 .elementor-element.elementor-element-338c691{--padding-top:10px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-421 .elementor-element.elementor-element-d4b6df8 .elementor-heading-title{font-size:17px;}.elementor-421 .elementor-element.elementor-element-075bdaf .elementor-heading-title{font-size:15px;}.elementor-421 .elementor-element.elementor-element-d9c4753 .elementor-button{font-size:16px;}}/* Start custom CSS for woocommerce-product-images, class: .elementor-element-a60d249 *//* ========================================================================== گالری تصاویر محصول (WooCommerce Product Images) — اسکین برند پارچه نسل باف | قرمز #ed2728 | خاکستری تیره #404040 محل استفاده: المنتور ▸ ویجت Product Images ▸ Advanced ▸ Custom CSS محدوده اثر: فقط همین ویجت (پیشوند `.elementor-421 .elementor-element.elementor-element-a60d249`) چیدمان: دسکتاپ ← ریل بندانگشتی در پنل مجزا «کنار» تصویر، تراز با عکس شاخص (بالای پنل = بالای عکس، پایین پنل = پایین عکس) تبلت/موبایل ← ردیف بندانگشتیها زیر تصویر ریل همیشه «تکستونه» است و اندازهی هر بندانگشتی خودکار از ارتفاع پنل حساب میشود: (ارتفاع عکس − فاصلههای بین بندانگشتیها) ÷ تعداد تصاویر پس با ۴ یا ۸ یا ۱۲ تصویر (کمتر یا بیشتر) همهی ردیفها بدون اسکرول و با تراز کامل بالا/پایین عکس جا میشوند. ========================================================================== */ /* -------------------------------------------------------------------------- 1) توکنهای طراحی -------------------------------------------------------------------------- */ .elementor-421 .elementor-element.elementor-element-a60d249 { --fb-red: #ed2728; --fb-dark: #404040; --fb-radius: 16px; /* گردی گوشههای کادر تصویر */ --fb-under: 14px; /* فاصلهی تصویر تا ریل/ردیف بندانگشتی */ --fb-thumb: 76px; --fb-thumb-op: .72; /* شفافیت بندانگشتیهای غیرفعال (۱ = کاملاً پررنگ) */ --fb-thumb-radius: 10px; --fb-gap: 10px; --fb-rail-max: 76px; /* بیشترین اندازهی بندانگشتی ریل (= پهنای ریل) */ --fb-rail-gap: 6px; /* فاصله بندانگشتیها در ریل */ --fb-rail-pad: 6px; /* فضای داخلی پنل ریل */ --fb-edge: 16px; /* فاصلهی بصری بین عکس و پنل (دسکتاپ) */ --fb-rows: 8; /* تعداد ردیفها؛ خودکار بر اساس تعداد تصاویر تنظیم میشود */ --fb-rail: calc(var(--fb-rail-max) + var(--fb-rail-pad) * 2); --fb-rail-dist: space-between; /* پخش ردیفها در ارتفاع پنل: space-between | space-evenly | flex-start */ --fb-align: 0px; /* تنظیم ریز تراز پنل با عکس (اگر قالب شما padding پایین داشت) */ --fb-rail-bg: #f7f7f8; /* برای حذف پنل خاکستری: transparent */ --fb-rail-radius: 14px; --fb-ease: cubic-bezier(.22, .61, .36, 1); --fb-frame: 0 0 0 1px rgba(64, 64, 64, .07), 0 24px 48px -34px rgba(64, 64, 64, .55), 0 4px 14px -10px rgba(64, 64, 64, .10); } /* -------------------------------------------------------------------------- 2) تصویر اصلی -------------------------------------------------------------------------- */ .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery { position: relative; opacity: 1 !important; } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-viewport { background-color: #fff; border-radius: var(--fb-radius); box-shadow: var(--fb-frame); margin-bottom: var(--fb-under); } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .woocommerce-product-gallery__image > a { display: block; border-radius: var(--fb-radius); box-shadow: var(--fb-frame); overflow: hidden; /* برشِ زوم روی گوشههای نرم */ } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img { background-color: #fff; border-radius: var(--fb-radius); transform-origin: 50% 50%; transition: transform .6s var(--fb-ease); } @media (hover: hover) and (pointer: fine) { .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image > a:hover img { transform: scale(1.025); } } /* -------------------------------------------------------------------------- 3) بندانگشتیها — بخش مشترک -------------------------------------------------------------------------- */ .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--fb-gap); position: static; overflow: visible !important; } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 var(--fb-thumb); min-width: var(--fb-thumb); width: auto; margin: 0; border-radius: var(--fb-thumb-radius); transition: transform .35s var(--fb-ease); } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs li img:not(.woocommerce-product-gallery__video-thumbnail-placeholder) { display: block; box-sizing: border-box; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 2px solid rgba(64, 64, 64, .10); border-radius: var(--fb-thumb-radius); background-color: #fff; opacity: var(--fb-thumb-op); cursor: pointer; transition: opacity .3s var(--fb-ease), border-color .3s var(--fb-ease), box-shadow .3s var(--fb-ease); } @media (hover: hover) and (pointer: fine) { .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs:hover li img:not(.woocommerce-product-gallery__video-thumbnail-placeholder) { opacity: .42; } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs li:hover { transform: translateY(-2px); } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs li:hover img:not(.woocommerce-product-gallery__video-thumbnail-placeholder) { opacity: 1; border-color: rgba(64, 64, 64, .28); } } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs li img.flex-active { opacity: 1 !important; border-color: #fff; box-shadow: 0 0 0 2px var(--fb-red), 0 8px 18px -12px rgba(237, 39, 40, .65); } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active) { transform: translateY(-2px); } /* -------------------------------------------------------------------------- 4) تبلت و موبایل: بندانگشتیها زیر تصویر -------------------------------------------------------------------------- */ @media (max-width: 767px) { .elementor-421 .elementor-element.elementor-element-a60d249 { --fb-thumb: 68px; --fb-gap: 8px; } } /* -------------------------------------------------------------------------- 5) دسکتاپ: ریل «کنار» تصویر — بدون همپوشانی، بدون اسکرول، تراز با عکس -------------------------------------------------------------------------- فضای ریل با «padding ناحیهی شروع» روی خود گالری رزرو میشود و ریل با absolute در همان ناحیه مینشیند. • absolute بودن ریل لازم است چون FlexSlider در فایرفاکس عرض «گالری» را میسنجد؛ اگر ریل با فلکس داخل جریان باشد، عرض گالری از عرض تصویر بیشتر میشود و اسلایدها اشتباه محاسبه میشوند (چند تصویر همزمان). • !important روی padding لازم است چون ووکامرس/قالبها روی div.images مقدار padding:0 میگذارند که سلکتورش قویتر است و فضای رزرو را صفر میکند؛ نتیجهاش افتادن پنل روی عکس است. • تراز: پنل از «بالای عکس» (inset-block-start: 0) تا «پایین عکس» (inset-block-end: 0) کشیده میشود؛ چون ارتفاع گالری = ارتفاع تصویر + فاصلهی زیر آن، با صفر گذاشتن inset-block-end پایین پنل همتراز پایین عکس میشود. ردیفهای بندانگشتی هم با align-content: space-between در همین ارتفاع پخش میشوند تا ردیف اول و آخر دقیقاً همتراز لبهها باشند. -------------------------------------------------------------------------- */ @media (min-width: 1025px) { /* --- تعداد ردیفها، خودکار بر اساس تعداد تصاویر (ریل تکستونه) --- عدد هر باند، «سقف» تعداد تصاویر آن باند است؛ با آن، ارتفاع هر بندانگشتی طوری حساب میشود که مجموع ردیفها از ارتفاع عکس بیشتر نشود: ارتفاع هر بندانگشتی = (۱۰۰٪ ارتفاع پنل − فاصلهها) ÷ تعداد ردیفها پس برای ۴ یا ۸ یا ۱۲ تصویر، همه بدون اسکرول جا میشوند و تراز میمانند. */ .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:not(:has(.flex-control-thumbs li:nth-child(2))) { --fb-rows: 1; } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(2)):not(:has(.flex-control-thumbs li:nth-child(4))) { --fb-rows: 3; /* ۲ تا ۳ تصویر */ --fb-rail-dist: space-evenly; /* گروه در وسط پنل، فاصلهی یکنواخت */ } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(4)):not(:has(.flex-control-thumbs li:nth-child(5))) { --fb-rows: 4; /* ۴ تصویر */ } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(5)):not(:has(.flex-control-thumbs li:nth-child(7))) { --fb-rows: 6; /* ۵ تا ۶ تصویر */ } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(7)):not(:has(.flex-control-thumbs li:nth-child(9))) { --fb-rows: 8; /* ۷ تا ۸ تصویر */ } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(9)):not(:has(.flex-control-thumbs li:nth-child(11))) { --fb-rows: 10; /* ۹ تا ۱۰ تصویر */ } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(11)):not(:has(.flex-control-thumbs li:nth-child(13))) { --fb-rows: 12; /* ۱۱ تا ۱۲ تصویر */ } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(13)):not(:has(.flex-control-thumbs li:nth-child(16))) { --fb-rows: 15; /* ۱۳ تا ۱۵ تصویر */ } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(16)) { --fb-rows: 18; /* ۱۶ تصویر و بیشتر */ } /* در حالت ریل کناری، فاصلهی «زیر تصویر» لازم نیست (بندانگشتیها کنارِ عکساند) و حذفش باعث میشود ارتفاع گالری دقیقاً برابر ارتفاع عکس شود ⇒ تراز کامل. */ .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-viewport { margin-bottom: 0; } /* فضای ریل در سمت شروع رزرو میشود (راست در RTL، چپ در LTR) */ .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery { box-sizing: border-box; padding-inline-start: calc(var(--fb-rail) + var(--fb-gap) + var(--fb-edge)) !important; padding-inline-end: 0 !important; } /* اگر محصول فقط یک تصویر دارد، فضا رزرو نشود */ .elementor-421 .elementor-element.elementor-element-a60d249:not(:has(.woocommerce-product-gallery .flex-control-thumbs li)) .woocommerce-product-gallery { padding-inline-start: 0 !important; } /* خود ریل، در فضای رزروشده — همقد عکس، تکستونه */ .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs { position: absolute; inset-block-start: 0; /* همتراز بالای عکس */ inset-block-end: var(--fb-align); /* همتراز پایین عکس */ inset-inline-start: 0; inset-inline-end: auto; width: var(--fb-rail); box-sizing: border-box; flex-flow: column nowrap; /* تکستونه: هر بندانگشتی یک ردیف */ justify-content: var(--fb-rail-dist); /* ردیفها در ارتفاع پنل پخش میشوند */ align-items: center; align-content: center; padding: var(--fb-rail-pad); gap: var(--fb-rail-gap); background: var(--fb-rail-bg); border-radius: var(--fb-rail-radius); overflow-x: hidden !important; overflow-y: auto !important; /* فقط تور ایمنی */ overscroll-behavior: contain; scrollbar-width: none; } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; } /* --- بندانگشتیها: ارتفاع از «ارتفاع پنل ÷ تعداد ردیفها» میآید و نسبت ۱:۱ عرض را میسازد ⇒ همیشه مربع، همیشه جا میشود. --- */ /* توجه: کلاسها تکرار شدهاند (`.woocommerce-product-gallery.woocommerce-product-gallery` و `.flex-control-thumbs.flex-control-thumbs`) تا این قاعده از سلکتور عمیق ووکامرس (`.woocommerce div.product div.images .flex-control-thumbs li` که `width: 25%` میدهد) قویتر شود؛ وگرنه عرض از نسبت ۱:۱ ساخته نمیشد و بندانگشتیها مربع نمیشدند. */ .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery.woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs li { flex: 0 0 auto; width: auto; min-width: 0; max-width: var(--fb-rail-max); height: calc((100% - (var(--fb-rows) - 1) * var(--fb-rail-gap)) / var(--fb-rows)); max-height: var(--fb-rail-max); aspect-ratio: 1 / 1; /* عرض از ارتفاع ساخته میشود ⇒ همیشه مربع */ box-sizing: border-box; } /* تصویر داخل هر ردیف، همان مربع را پر میکند */ .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs li img:not(.woocommerce-product-gallery__video-thumbnail-placeholder) { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } @media (hover: hover) and (pointer: fine) { .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs li:hover img:not(.woocommerce-product-gallery__video-thumbnail-placeholder) { box-shadow: 0 8px 16px -12px rgba(64, 64, 64, .9); } } /* --- اگر روزی گالریای با ۲۰+ تصویر داشتید، تکستونه خیلی ریز میشود؛ با باز کردن کامنت این دو خط، ریل برای آن حالت دو ستونه میشود --- .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(16)) .flex-control-thumbs.flex-control-thumbs { width: calc(var(--fb-rail-max) * 2 + var(--fb-rail-gap) + var(--fb-rail-pad) * 2); } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery:has(.flex-control-thumbs li:nth-child(16)) { --fb-rows: 9; } */ /* --- اگر ریل را سمت مقابل خواستید (چپ در RTL) این دو خط را فعال کنید --- .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery { padding-inline-start: 0 !important; padding-inline-end: calc(var(--fb-rail) + var(--fb-gap) + var(--fb-edge)) !important; } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs { inset-inline-start: auto; inset-inline-end: 0; } */ } /* -------------------------------------------------------------------------- 6) دسترسپذیری -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img, .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs li, .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-control-thumbs li img { transition: none !important; transform: none !important; } } /* -------------------------------------------------------------------------- 7) اختیاری ۱: کادر استودیویی برای عکسهای با پسزمینه سفید -------------------------------------------------------------------------- .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-viewport { background-color: #f7f7f8; } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img { background-color: transparent; mix-blend-mode: multiply; } */ /* -------------------------------------------------------------------------- 8) اختیاری ۲: دکمهی بزرگنمایی — همرنگ برند و در گوشهی درست -------------------------------------------------------------------------- */ .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .woocommerce-product-gallery__trigger { inset-inline-end: .75em !important; inset-inline-start: auto !important; background: rgba(255, 255, 255, .92) !important; box-shadow: 0 8px 20px -14px rgba(64, 64, 64, .8) !important; transition: background-color .3s var(--fb-ease); } .elementor-421 .elementor-element.elementor-element-a60d249 .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover { background: var(--fb-red) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-breadcrumb, class: .elementor-element-d3cdf50 *//* ========================= Breadcrumb Clean Style ========================= */ /* باکس اصلی */ .elementor-421 .elementor-element.elementor-element-d3cdf50 { background:#ffffff; border-radius:14px; padding:12px 20px; box-shadow:0 6px 20px rgba(0,0,0,.05); border:1px solid #eeeeee; font-size:13px; line-height:2; color:#777; } /* لینک‌ها */ .elementor-421 .elementor-element.elementor-element-d3cdf50 a { color:#555; font-weight:500; text-decoration:none; transition:.3s ease; } /* هاور لینک */ .elementor-421 .elementor-element.elementor-element-d3cdf50 a:hover { color:#ed1c24; } /* فقط فاصله خود اسلش‌ها */ .elementor-421 .elementor-element.elementor-element-d3cdf50 .delimiter, .elementor-421 .elementor-element.elementor-element-d3cdf50 .separator { display:inline-block; margin-left:10px !important; margin-right:10px !important; color:#999; } /* حذف هر خط یا رنگ اضافه */ .elementor-421 .elementor-element.elementor-element-d3cdf50 { border-right:none !important; } /* عنوان فعلی */ .elementor-421 .elementor-element.elementor-element-d3cdf50 span:last-child { color:#ed1c24; font-weight:700; }/* End custom CSS */ /* Start custom CSS for woocommerce-product-short-description, class: .elementor-element-cb9663f *//* ========================== Short Description Style Responsive Version ========================== */ /* باکس توضیحات کوتاه */ .elementor-421 .elementor-element.elementor-element-cb9663f { background:#ffffff; border:1px solid #eeeeee; border-radius:16px; padding:22px 25px; box-shadow:0 8px 25px rgba(0,0,0,.05); width:100%; box-sizing:border-box; } /* لیست */ .elementor-421 .elementor-element.elementor-element-cb9663f ul { margin:0; padding:0; list-style:none; } /* هر ویژگی */ .elementor-421 .elementor-element.elementor-element-cb9663f li { position:relative; padding-right:32px; margin-bottom:14px; font-size:15px; line-height:2; color:#444; font-weight:500; } /* آیکون تیک */ .elementor-421 .elementor-element.elementor-element-cb9663f li:before { content:"✓"; position:absolute; right:0; top:50%; transform:translateY(-50%); width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:#ed1c24; color:#fff; border-radius:50%; font-size:12px; font-weight:bold; } /* آخرین آیتم */ .elementor-421 .elementor-element.elementor-element-cb9663f li:last-child { margin-bottom:0; } /* متن مهم */ .elementor-421 .elementor-element.elementor-element-cb9663f strong { color:#111; font-weight:700; } /* ========================== Mobile ========================== */ @media (max-width:767px){ .elementor-421 .elementor-element.elementor-element-cb9663f { padding:16px 14px; border-radius:14px; box-shadow:0 5px 18px rgba(0,0,0,.04); } .elementor-421 .elementor-element.elementor-element-cb9663f li { padding-right:28px; margin-bottom:10px; font-size:13px; line-height:1.9; } .elementor-421 .elementor-element.elementor-element-cb9663f li:before { width:17px; height:17px; font-size:10px; } .elementor-421 .elementor-element.elementor-element-cb9663f strong { font-size:13px; } } /* ========================== Tablet ========================== */ @media (min-width:768px) and (max-width:1024px){ .elementor-421 .elementor-element.elementor-element-cb9663f { padding:18px 20px; } .elementor-421 .elementor-element.elementor-element-cb9663f li { font-size:14px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3963521 *//* کارت تماس */ .elementor-421 .elementor-element.elementor-element-3963521 { background: #ffffff; border-radius: 18px; border: 1px solid #eeeeee; padding: 22px 25px; box-shadow: 0 8px 25px rgba(0,0,0,0.06); position: relative; } /* فقط متن عنوان */ .elementor-421 .elementor-element.elementor-element-3963521 h3, .elementor-421 .elementor-element.elementor-element-3963521 h4 { color:#222 !important; font-weight:700; } /* فقط دکمه تماس */ .elementor-421 .elementor-element.elementor-element-3963521 .elementor-button { background:#ed1c24 !important; color:#fff !important; border-radius:12px; padding:12px 35px; font-weight:700; box-shadow:none !important; } /* شماره تماس داخل دکمه */ .elementor-421 .elementor-element.elementor-element-3963521 .elementor-button span { color:#fff !important; } /* هاور */ .elementor-421 .elementor-element.elementor-element-3963521 .elementor-button:hover { background:#c9151c !important; transform:translateY(-2px); }/* End custom CSS */ /* Start custom CSS for woocommerce-product-data-tabs, class: .elementor-element-afb3aaf *//* ========================== Product Tabs Professional Style ========================== */ /* کل باکس تب‌ها */ .elementor-421 .elementor-element.elementor-element-afb3aaf { background:#fff; border-radius:18px; border:1px solid #eeeeee; box-shadow:0 10px 30px rgba(0,0,0,.05); overflow:hidden; } /* تب‌ها */ .elementor-421 .elementor-element.elementor-element-afb3aaf ul.tabs { background:#fafafa; padding:15px 25px; margin:0; border-bottom:1px solid #eee; } /* آیتم تب */ .elementor-421 .elementor-element.elementor-element-afb3aaf ul.tabs li { border:none !important; background:transparent !important; border-radius:10px; padding:10px 25px; } /* تب فعال */ .elementor-421 .elementor-element.elementor-element-afb3aaf ul.tabs li.active { background:#ed1c24 !important; } .elementor-421 .elementor-element.elementor-element-afb3aaf ul.tabs li.active a { color:#fff !important; } /* جلوگیری از سفید شدن محتوای توضیحات */ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel, .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel p, .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel li { color:#333 !important; } /* محتوای توضیحات */ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel { padding:35px 45px; } /* متن پاراگراف */ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel p { text-align:justify; text-align-last:right; font-size:16px; line-height:2.3; color:#444 !important; margin-bottom:25px; } /* تیترهای داخل متن */ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel h2, .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel h3, .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel h4 { display:flex; align-items:center; gap:12px; color:#222; font-weight:800; margin-top:35px; margin-bottom:20px; } /* خط قرمز کنار تیتر */ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel h2:before, .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel h3:before, .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel h4:before { content:""; display:inline-block; width:5px; height:24px; background:#ed1c24; border-radius:10px; flex-shrink:0; } /* لیست‌ها */ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel ul { padding-right:25px; } .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel li { line-height:2.2; margin-bottom:10px; } /* موبایل */ @media(max-width:768px){ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel { padding:25px 18px; } .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel p { font-size:14px; line-height:2; } .elementor-421 .elementor-element.elementor-element-afb3aaf ul.tabs { padding:10px; } } /* کاهش فاصله بین متن‌ها */ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel p { margin-bottom:14px !important; line-height:2 !important; } /* کاهش فاصله تیترها */ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel h2, .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel h3, .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel h4 { margin-top:25px !important; margin-bottom:12px !important; } /* فاصله کلی محتوای توضیحات */ .elementor-421 .elementor-element.elementor-element-afb3aaf .woocommerce-Tabs-panel { padding-top:25px !important; padding-bottom:25px !important; }/* End custom CSS */