/* افزودنی‌های صفحهٔ اصلی و لایهٔ سایت؛ بعد از SiteNew.css بارگذاری می‌شود و فقط ظاهر را اصلاح می‌کند */

/* ---- دسترسی‌پذیری و حرکت ---- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(var(--red-rgb), .45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- اسلایدر: خوانایی متن ---- */
.farao-slide-subtitle { color: #fff; background: rgba(var(--red-rgb), .88); border-color: rgba(255, 255, 255, .35); }
.farao-slide-title span { color: var(--red-on-dark); }

/* نقطه‌های اسلایدر بالاتر از کارت‌های خدمات */
.farao-slider-dots { bottom: 66px; }

/* ---- ریتم فاصله‌ها ---- */
.section-padding { padding: 52px 0; }
.section-header { margin-bottom: 38px; }
.section-title { font-size: 32px; }
.section-more-wrap { margin-top: 22px; }
.section-more {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; text-decoration: none;
    color: var(--primary-red); border: 1.5px solid var(--red-light); background: var(--red-soft);
    padding: 6px 16px; border-radius: 50px; transition: background .2s, color .2s, transform .2s;
}
.section-more:hover { background: var(--primary-red); color: #fff; transform: translateY(-2px); }
.section-more i { font-size: 12px; }

/* ---- کارت‌ها: حرکت ملایم‌تر ---- */
.product-card, .video-card { border-radius: 20px; box-shadow: 0 4px 16px rgba(17, 24, 39, .07); }
.product-card:hover, .video-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(17, 24, 39, .12), 0 6px 14px rgba(var(--red-rgb), .1); }
.product-card:hover .product-image img { transform: scale(1.06); }
.product-badge { animation: none; }

/* ---- میان‌بُرهای خدمات زیر اسلایدر ---- */
.home-services { max-width: 1200px; margin: -46px auto 10px; padding: 0 12px; position: relative; z-index: 30; }
.home-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-service {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none;
    background: #fff; color: var(--gray-800); border: 1px solid var(--gray-200); border-radius: 18px;
    box-shadow: 0 10px 26px rgba(17, 24, 39, .12); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.home-service:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(var(--red-rgb), .18); border-color: var(--red-border); color: var(--gray-900); }
.home-service-icon {
    flex: 0 0 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: var(--red-soft); color: var(--primary-red); font-size: 22px; transition: background .2s, color .2s;
}
.home-service:hover .home-service-icon { background: var(--red-gradient); color: #fff; }
.home-service:hover .fa-fan { animation: home-spin 1.4s linear infinite; }
@keyframes home-spin { to { transform: rotate(360deg); } }
.home-service-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-service-text b { font-size: 15px; font-weight: 700; }
.home-service-text small { font-size: 12px; color: var(--gray-600); line-height: 1.7; }
.home-service--fan { background: linear-gradient(135deg, #fff, var(--red-soft)); border-color: var(--red-border); }
.home-service--fan .home-service-icon { background: var(--red-gradient); color: #fff; }
.home-service-badge {
    position: absolute; top: -9px; inset-inline-start: 14px; background: var(--red-gradient); color: #fff;
    border-radius: 50px; padding: 2px 11px; font-size: 11px; font-weight: 700; box-shadow: var(--shadow-red);
}

/* ---- دسته‌بندی‌ها: فاصله و عنوان ---- */
.category-title { font-size: 13.5px; }

/* ---- فوتر ---- */
.footer-about { margin-bottom: 14px; }

@media (max-width: 991.98px) {
    .home-services { margin-top: 14px; }
    .farao-slider-dots { bottom: 30px; }
    .home-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .home-services-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 26px; }
    .section-padding { padding: 38px 0; }
}

/* ---- لوگوی متحرک: فن وسط لوگو همیشه می‌چرخد ---- */
.logo.logo-anim { display: inline-block; line-height: 0; }
.logo.logo-anim .logo-fan {
    position: absolute;
    left: 40.5063%;      /* 192 / 474 */
    top: 5.4545%;        /* 3 / 55 */
    width: 10.3376%;     /* 49 / 474 */
    height: auto !important;
    filter: none;
    transform-origin: 50% 50%;
    animation: fara-fan-spin 3s linear infinite;
    will-change: transform;
    pointer-events: none;
}
.logo.logo-anim:hover .logo-fan { animation-duration: .9s; }
@keyframes fara-fan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .logo.logo-anim .logo-fan { animation: none; }
}

/* ---- کارت محصول: دکمهٔ «سفارش و خرید» / «در انبار موجود نیست» همیشه ته کارت و هم‌تراز ---- */
.product-grid { align-items: stretch; }
.product-card { display: flex; flex-direction: column; }
.product-card .product-image { flex: 0 0 auto; }
.product-card .product-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.product-card .product-content > .row {
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    margin-inline: 0;
}
.product-card .product-content > .row > * { padding-inline: 0; }
.product-card .product-content > .row > :last-child { margin-top: auto; }
.product-card .product-price { margin-bottom: 12px; }

/* ---- فوتر: سرمه‌ای هم‌رنگ لوگو به‌جای مشکی، با درخشش ملایم قرمز ---- */
.footer {
    background:
        radial-gradient(circle at 85% 0%, rgba(var(--red-rgb), .16) 0%, transparent 45%),
        radial-gradient(circle at 10% 100%, rgba(56,110,200,.18) 0%, transparent 50%),
        linear-gradient(160deg, #0f2d5e 0%, #0b2349 55%, #081a38 100%);
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--primary-red), var(--red-dark) 40%, #1d4f9f) 1;
}
.footer::before { display: none; }
.footer .footer-about,
.footer .footer-links a,
.footer .footer-contact li,
.footer .footer-contact a { color: rgba(255,255,255,.82); }
.footer .footer-links a:hover,
.footer .footer-contact a:hover { color: #fff; }
.footer .footer-widget h4,
.footer .footer-widget h5,
.footer .footer-widget h3 { color: #fff; }
.footer .footer-social a { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
.footer-bottom { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.72); }
.footer-bottom a { color: rgba(255,255,255,.72); }
.footer-bottom a:hover { color: #fff; }
.footer-bottom .designer { color: var(--red-on-dark); }
.footer-features { position: relative; z-index: 3; }

/* ---- لوگو: برش تنگ‌تر و بزرگ‌تر ---- */
.logo.logo-anim .logo-base { width: 215px; height: auto !important; max-width: 100%; filter: none; }
.header-main.scrolled .logo.logo-anim .logo-base { width: 185px; height: auto !important; }

/* ---- اسلایدر: بدون افکت زوم، با پوشش تیرگی ملایم‌تر تا تصویر شفاف بماند ---- */
.farao-slide-img,
.farao-slide.active .farao-slide-img { transform: none !important; transition: none !important; }
.farao-slide-overlay {
    background: linear-gradient(135deg, rgba(8,26,56,.55) 0%, rgba(8,26,56,.30) 50%, rgba(8,26,56,.10) 100%);
}

/* ---- نوار بالایی: سرمه‌ای هم‌رنگ فوتر و لوگو ---- */
.top-bar {
    background: linear-gradient(90deg, #0b2349, #0f2d5e);
    color: rgba(255,255,255,.88);
    padding: 7px 0;
    border-bottom: 3px solid var(--primary-red);
}
.top-bar i { color: var(--red-on-dark); }

/* ---- هدر اصلی: سایهٔ ظریف و فاصلهٔ متعادل ---- */
.header-main { padding: 10px 0; box-shadow: 0 6px 22px rgba(15, 45, 94, .08); }
.header-main.scrolled { box-shadow: 0 8px 26px rgba(15, 45, 94, .14); }

/* ---- ارتفاع اسلایدر در دسکتاپ کمتر شد تا محصولات زودتر دیده شوند ---- */
@media (min-width: 993px) {
    .farao-hero-slider { height: clamp(400px, 25vw, 470px); }
}

/* ---- دکمه‌های شناور: کوچک‌تر و بدون پوشاندن محتوا ---- */
.floating-cart { bottom: 22px; left: 22px; animation: fara-float 3.5s ease-in-out infinite; }
@keyframes fara-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.floating-cart a { width: 50px; height: 50px; font-size: 19px; border-width: 3px; box-shadow: 0 6px 16px rgba(197, 48, 48, .35); }
.floating-cart a:hover { transform: scale(1.08); }
.floating-cart .cart-count { font-size: 11px; }

/* «بازگشت به بالا»: از وسط صفحه به گوشهٔ راست پایین رفت */
.farao-back-to-top {
    left: auto; right: 22px; bottom: 22px;
    width: 42px; height: 42px; font-size: 16px; border-width: 2px;
    transform: translateY(80px);
}
.farao-back-to-top.show { transform: none; opacity: .92; animation: none; }
.farao-back-to-top:hover { transform: translateY(-3px); opacity: 1; box-shadow: 0 8px 18px rgba(var(--red-rgb), .45); }
.farao-back-to-top:active { transform: scale(.94); }
@media (max-width: 768px) {
    .floating-cart { bottom: 16px; left: 14px; }
    .floating-cart a { width: 44px; height: 44px; font-size: 17px; }
    .farao-back-to-top { right: 14px; bottom: 16px; width: 38px; height: 38px; font-size: 15px; }
}

/* ---- برندها: یک ردیف، لوگوی بدون کشیدگی ---- */
.brand-strip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 16px;
    overflow-x: auto;
    padding: 6px 4px 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.brand-strip::-webkit-scrollbar { display: none; }
.brand-item {
    flex: 1 1 0;
    min-width: 132px;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    background: #fff;
    border: 1px solid var(--gray-200, #E5E7EB);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(15, 45, 94, .05);
    text-decoration: none;
    scroll-snap-align: center;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.brand-item:hover { transform: translateY(-3px); border-color: rgba(var(--red-rgb), .45); box-shadow: 0 10px 24px rgba(var(--red-rgb), .14); }
.brand-logo { display: block; width: 100%; height: 56px; }
.brand-img {
    width: 100%;
    height: 56px;
    object-fit: contain;
    display: block;
    filter: grayscale(100%);
    opacity: .8;
    transition: filter .3s, opacity .3s;
}
.brand-item:hover .brand-img { filter: none; opacity: 1; }
.brand-name { font-size: 13px; font-weight: 600; color: var(--gray-600, #4B5563); text-align: center; line-height: 1.6; }
@media (max-width: 767px) {
    .brand-strip { justify-content: flex-start; gap: 12px; }
    .brand-item { flex: 0 0 132px; }
}