/**
 * Acknoon custom styles.
 *
 * Add project-specific presentation rules to this file. Keep selectors scoped
 * to the smallest stable component class and avoid IDs or !important unless a
 * documented third-party override requires them.
 *
 * @package Acknoon
 * @since   1.0.0
 */

/* ==========================================================================
   01. Design tokens
   ========================================================================== */

:root {
	--acknoon-color-primary: #00a8a8;
	--acknoon-color-primary-low: #9ad3da;
	--acknoon-color-secondary: #03444a;
	--acknoon-color-tertiary: #ff924d;
	--acknoon-color-white: #ffffff;
}

/* ==========================================================================
   02. Base
   ========================================================================== */
/**
 * Site typography
 *
 * Apply the project font through inheritance. Avoid universal selectors here:
 * icon libraries use their own font families to render glyphs correctly.
 *
 * @since 1.0.0
 */
body {
	font-family: "YekanBakhX", sans-serif;
}

button,
input,
select,
textarea,a,h1,h2,h3,h4,h5,h6 {
	font-family: inherit !important;
}
.elementor-8 .elementor-element.elementor-element-a5f385a .elementor-nav-menu .elementor-item {
    font-weight: 700;
}
h5.elementor-heading-title.elementor-size-default{
    font-weight: 800 !important;
}
.product-discount-percent {
    background-color: var(--acknoon-color-secondary) !important;
}
a.button.aux-ajax-add-to-cart::before {
    background-color: var(--acknoon-color-secondary) !important;
}
.elementor-362 .elementor-element.elementor-element-652833c:not(.elementor-motion-effects-element-type-background), .elementor-362 .elementor-element.elementor-element-652833c > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: var(--acknoon-color-secondary) !important;
}
.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a {
    letter-spacing: -1px !important;
    font-weight: 700;
}
h5.product_title.entry-title.elementor-heading-title.elementor-size-default .elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a {
    line-height: 1.3rem;
}
.elementor-8 .elementor-element.elementor-element-0ecc33a {
    background-color: var(--acknoon-color-primary) !important;
}
a.button.aux-ajax-add-to-cart:hover,
.aux-parallax-section.elementor-element.elementor-element-4929aa5.proocard.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded:hover a.button.aux-ajax-add-to-cart{
    background-color: var(--acknoon-color-secondary) !important;
}
a.button.aux-ajax-add-to-cart:hover::before,
.aux-parallax-section.elementor-element.elementor-element-4929aa5.proocard.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded:hover a.button.aux-ajax-add-to-cart::before{
    background-color: var(--acknoon-color-primary) !important;
}
footer .elementor-heading-title {
    color: var(--acknoon-color-white) !important;
}
.elementor-image-carousel-wrapper.swiper.swiper-fade.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-rtl.swiper-watch-progress.swiper-backface-hidden .custom-progress-slider .swiper-pagination-bullet.viewed {
    background: var(--acknoon-color-primary) !important;
}
#tippy-6 .tippy-content,
#tippy-5 .tippy-content,
#tippy-2 .tippy-content {
    color: var(--acknoon-color-white) !important;
}
.elementor-nav-menu--main .elementor-nav-menu--dropdown .sub-arrow .e-font-icon-svg {
    fill: var(--acknoon-color-primary) !important;
}
.elementor-8 .elementor-element.elementor-element-a5f385a .elementor-nav-menu--dropdown {
    background-color: var(--acknoon-color-secondary) !important;
}
.elementor-item:hover::after {
    background: var(--acknoon-color-primary) !important;
}
.elementor-8 .elementor-element .elementor-nav-menu--main .elementor-item{
    color: var(--acknoon-color-secondary) !important;
    fill: var(--acknoon-color-secondary) !important;
}
h5.elementor-heading-title.elementor-size-default span {
    color: var(--acknoon-color-secondary) !important;
}
.custom-progress-slider .swiper-pagination-bullet.viewed {
    background: var(--acknoon-color-primary) !important;
    filter: drop-shadow(0 4px 2.5px rgb(224, 250, 255)) !important;
}
.custom-progress-slider .swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    height: 100%;
    width: 0%;
    background: linear-gradient(
            270deg,      /* راست → چپ */
            var(--acknoon-color-primary) 0%,
            #e0faff 100%
    );
    border-radius: 2px;
}
.force-centered-carousel .swiper-pagination-current {
    color: var(--acknoon-color-primary) !important;
}
.force-centered-carousel .swiper-pagination-fraction {
    background: var(--acknoon-color-secondary) !important;
}
.elementor-38 .elementor-element.elementor-element-0a7fa5e,
.elementor-38 .elementor-element.elementor-element-ac60d49{
    --width: 4.5rem;
}
.force-centered-carousel .swiper-pagination-fraction::before {
    background: var(--acknoon-color-primary) !important;
}
div#pagePreloadProgressbar{
    background: linear-gradient(-270deg, var(--acknoon-color-primary) 0%, var(--acknoon-color-primary-low) 100%) !important;
}
.carousel-progress-bar {
    background: linear-gradient(270deg, var(--acknoon-color-primary) 0%, var(--acknoon-color-primary-low) 100%);
}
.aux-goto-top-btn .aux-arrow-nav.aux-outline {
    background: var(--acknoon-color-primary) !important;
}
.elementor-nav-menu .elementor-item:hover::after {
    background-color: var(--acknoon-color-tertiary) !important;
}
.elementor-8 .elementor-element.elementor-element-c49b2e2,
.elementor-8 .elementor-element.elementor-element-0ecc33a,
.elementor-8 .elementor-element.elementor-element-8593225
{
    filter: drop-shadow(0 5px 2.5px rgb(0, 168, 168,0.25)) !important;
}
/**
 * Brand link icon
 *
 * Replaces the theme-provided inline SVG without modifying Elementor
 * templates or parent-theme files.
 *
 * @since 1.0.0
 */
a.elementor-icon[href*="/brand/"] {
    --acknoon-brand-icon-width: 10px;
    --acknoon-brand-icon-height: 13px;
}

a.elementor-icon[href*="/brand/"] > svg {
    display: none;
}

a.elementor-icon[href*="/brand/"]::before {
    display: block;
    width: var(--acknoon-brand-icon-width);
    height: var(--acknoon-brand-icon-height);
    background: url("../images/icons/brand-arrow.svg") center / contain no-repeat;
    content: "";
}
/*.elementor-swiper-button.elementor-swiper-button-next > svg {*/
/*    display: none !important;*/
/*}*/

/*.elementor-swiper-button.elementor-swiper-button-next::before {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    display: block !important;*/
/*    width: 10px;*/
/*    height: 13px;*/
/*    background: transparent url("../images/icons/brand-arrow.svg")*/
/*    center / contain no-repeat;*/
/*    content: "";*/
/*    opacity: 1;*/
/*    pointer-events: none;*/
/*    transform: translate(-50%, -50%) scaleX(-1) !important;*/
/*    visibility: visible;*/
/*    z-index: 1;*/
/*}*/
/* Add document-level adjustments here. */

/* ==========================================================================
   03. Components
   ========================================================================== */

/**
 * Mirrored carousel next-button icon
 *
 * Reuses the brand arrow across the site while preserving Elementor's button
 * markup, accessibility attributes, and click behavior.
 *
 * @since 1.0.0
 */
/*.elementor-swiper-button.elementor-swiper-button-next > svg {*/
/*	display: none !important;*/
/*}*/

/*.elementor-swiper-button.elementor-swiper-button-next::before {*/
/*	position: absolute;*/
/*	top: 50%;*/
/*	left: 50%;*/
/*	display: block !important;*/
/*	width: 10px;*/
/*	height: 13px;*/
/*	background-color: transparent;*/
/*	background-image: url("../images/icons/brand-arrow.svg");*/
/*	background-position: center;*/
/*	background-repeat: no-repeat;*/
/*	background-size: contain;*/
/*	content: "";*/
/*	opacity: 1;*/
/*	pointer-events: none;*/
/*	transform: translate(-50%, -50%) scaleX(-1) !important;*/
/*	visibility: visible;*/
/*	z-index: 1;*/
/*}*/

/* ========================================================================== 
   04. Pages
   ========================================================================== */

/**
 * Product loop cards
 *
 * Keeps every instance of product Loop Template 476 at the same height,
 * reserves three lines for product titles, and anchors the purchase row to
 * the bottom of the card.
 *
 * @since 1.0.0
 */
.e-loop-item.elementor-476 {
	height: auto;
}

.e-loop-item.elementor-476 .elementor-element-4929aa5,
.e-loop-item.elementor-476 .elementor-element-4929aa5 > .e-con-inner {
	height: 100%;
}

.e-loop-item.elementor-476 .elementor-element-8c57ffa {
	min-block-size: 3.9rem;
}

.e-loop-item.elementor-476 .product_title {
	display: -webkit-box;
	overflow: hidden;
	line-height: 1.3rem;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.e-loop-item.elementor-476 .elementor-element-adaaed3 {
	margin-block-start: auto;
}
.elementor-38 .elementor-element.elementor-element-8e1d10b {
    --width: 4.5rem;
    padding-left: 0;
    padding-right: 0;
}
h6.elementor-heading-title.elementor-size-default {
    white-space: nowrap;
    text-align: center;
    justify-self: center;
}
.elementor-widget__width-initial.elementor-widget-mobile__width-auto.elementor-widget.elementor-widget-heading:hover {
    border-color: var(--acknoon-color-tertiary) !important;
}
/**
 * Home: popular publishers interaction layers
 *
 * Decorative tab artwork and inactive panels must never intercept pointer
 * input intended for product links in the active carousel.
 *
 * @since 1.0.0
 */
.page-id-38 .elementor-element-31a3b04 .protab [role="tab"]::after,
.page-id-38 .elementor-element-31a3b04 [role="tabpanel"]:not(.e-active) {
	pointer-events: none;
}

.page-id-38 .elementor-element-31a3b04 [role="tabpanel"].e-active {
	pointer-events: auto;
}
.cls-6,
g[clip-path="url(#url(#clip1_4399_4660))"] path{
    fill: #9ad3da !important;
}
#Layer_1 g.cls-4 g.cls-3 path,
g#Layer_1 g.cls-4 g.cls-3 path.cls-5,
.elementor-swiper-button.elementor-swiper-button-prev svg g[] g path{
    fill: #03444a !important;
}
/* ==========================================================================
   05. Utilities
   ========================================================================== */

/* Add narrowly focused utility classes here. */

/**
 * Keep the dollar symbol and its ISO currency code on the same line.
 *
 * @since 1.0.0
 */
.woocommerce-Price-currencySymbol {
	white-space: nowrap;
}

/* ==========================================================================
   06. Responsive overrides
   ========================================================================== */

/* Keep component-specific media queries close to their component when possible. */