/* SANAT Мебели — site styles on top of the ecomx theme. */

/* ---------------------------------------------------------------
   Single-page sections
   Only one section is visible at a time; the router in
   assets/js/main.js toggles .is-active based on the URL hash.
   --------------------------------------------------------------- */
.page-section {
    display: none;
}

.page-section.is-active {
    display: block;
}

/* ---------------------------------------------------------------
   Offline / asset gaps in the downloaded theme
   --------------------------------------------------------------- */
.flat-testimonial-bg-1,
.wrap-form-newlleter,
.tf-page-title {
    background-image: none !important;
}

.owl-carousel .owl-video-play-icon,
[class*="lcl_pattern_"] {
    background-image: none !important;
}

.offcanvas-backdrop,
.modal {
    cursor: auto !important;
}

.fa-sharp-duotone.fa-solid,
.fa-sharp-duotone.fa-light,
.fa-sharp-duotone.fa-regular {
    font-family: "Font Awesome 6 Sharp";
}

.fa-sharp-duotone.fa-solid,
.fa-sharp.fa-solid,
.fa-sharp-solid {
    font-weight: 900;
}

.fa-sharp.fa-light {
    font-weight: 300;
}

[x-cloak] {
    display: none !important;
}

.logo-header img.logo {
    max-height: 74px;
    width: auto;
    object-fit: contain;
}

.footer-logo img.logo {
    max-height: 82px;
    width: auto;
    object-fit: contain;
}

/* Buttons rendered as <a> without href still need the pointer cursor. */
.btn-icon-action[role="button"] {
    cursor: pointer;
}

/* ---------------------------------------------------------------
   Corporate / contact / stores panels
   --------------------------------------------------------------- */
.local-content-panel,
.local-store-card {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: clamp(24px, 4vw, 48px);
    background: #fff;
}

.local-feature {
    height: 100%;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 24px;
    background: #fafafa;
}

.local-feature i,
.local-store-card i {
    color: #8a6f4d;
}

.local-feature i {
    font-size: 28px;
    margin-bottom: 16px;
}

.local-feature p,
.local-store-card li {
    color: #555;
}

.local-store-card ul {
    display: grid;
    gap: 14px;
    padding: 0;
    list-style: none;
}

.local-store-card li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.local-store-card li i {
    width: 18px;
    padding-top: 4px;
}

.local-store-media {
    height: 100%;
    min-height: 360px;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
}

.local-store-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gap-12 {
    gap: 12px;
}

/* Bulgarian compounds such as "производителя" are wider than a phone-sized
   card at the theme's 56px heading size, which pushes the page sideways.
   Only phones are scaled down; larger screens keep the theme sizing. */
.local-content-panel h2,
.local-content-panel h3,
.local-store-card h2,
.local-store-card h3 {
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    .local-content-panel h2,
    .local-content-panel h3,
    .local-store-card h2,
    .local-store-card h3 {
        font-size: clamp(28px, 9vw, 40px);
    }
}

/* ---------------------------------------------------------------
   Instagram section
   --------------------------------------------------------------- */
/* Avatar ring stays circular; logo itself must NOT be circle-clipped
   (that was cutting the script S). White disc + scaled square logo. */
.instagram-section .profile-img .sanat-ig-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #dbdbdb;
    overflow: hidden;
    box-sizing: border-box;
}

.instagram-section .profile-img .sanat-ig-avatar img {
    display: block;
    width: 68% !important;
    height: 68% !important;
    max-width: 68% !important;
    padding: 0 !important;
    margin: 0;
    object-fit: contain;
    object-position: center;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

.instagram-section .owl-carousel .item {
    height: auto;
}

.instagram-section .owl-carousel .item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    border-radius: 6px !important;
}

/* ---------------------------------------------------------------
   Footer social icons and payment badges
   --------------------------------------------------------------- */
.footer .tf-social-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer .tf-social-icon .box-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    color: #fff !important;
    border-radius: 50%;
    transition: transform .2s ease, opacity .2s ease;
}

.footer .tf-social-icon .box-icon i {
    font-size: 18px;
    color: #fff !important;
}

.footer .tf-social-icon .box-icon.social-instagram {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100%);
}

.footer .tf-social-icon .box-icon.social-facebook {
    background: #1877F2;
}

.footer .tf-social-icon .box-icon:hover {
    transform: translateY(-2px);
    opacity: .92;
}

.footer .footer-newsletter > h6 {
    margin-top: 8px;
    margin-bottom: 14px;
    font-size: 15px;
}

.footer .tf-payment {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer .tf-payment img {
    height: 30px;
    width: auto;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    object-fit: contain;
}

.footer .tf-payment a {
    display: inline-flex;
}

.footer .footer-newsletter .tf-social-icon {
    margin-bottom: 24px;
}

/* ---------------------------------------------------------------
   Footer columns: brand block, headings and delivery flags
   --------------------------------------------------------------- */
.footer .footer-infor .footer-logo {
    margin-bottom: 18px;
}

.footer .footer-tagline {
    margin-bottom: 6px;
    font-weight: 600;
    line-height: 1.5;
}

.footer .footer-delivery {
    margin-bottom: 12px;
    line-height: 1.5;
}

.footer .footer-heading-note {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.5;
    opacity: .75;
}

.footer .footer-contact-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.footer .footer-contact-list li i {
    flex: 0 0 16px;
    font-size: 14px;
    text-align: center;
}

.footer .footer-contact-list li p {
    margin-bottom: 0;
}

/* The delivery flags stay in two compact rows and are scrolled
   sideways, so 51 countries cannot stretch the column or the page. */
.footer .footer-flags {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 40px;
    justify-content: start;
    gap: 6px;
    max-width: 100%;
    margin-bottom: 18px;
    padding-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf transparent;
}

.footer .footer-flags::-webkit-scrollbar {
    height: 4px;
}

.footer .footer-flags::-webkit-scrollbar-track {
    background: transparent;
}

.footer .footer-flags::-webkit-scrollbar-thumb {
    background: #cfcfcf;
    border-radius: 4px;
}

.footer .footer-flag {
    width: 40px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.footer .footer-flag img {
    display: block;
    width: 30px;
    height: 21px;
    object-fit: contain;
}

/* ---------------------------------------------------------------
   Footer alignment: one desktop row, clear space above the
   floating buttons on mobile
   --------------------------------------------------------------- */
@media (min-width: 992px) {
    /* A grid keeps the four blocks on one line and lets the brand
       column carry the flag strip without squeezing the menus. */
    .footer .footer-row-main {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
        align-items: start;
        column-gap: 8px;
    }

    /* Without min-width the scrollable flag strip would size the whole
       track to its full length and push the page sideways. */
    .footer .footer-row-main > [class*="col-"] {
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .footer .footer-wrap .footer-body {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .footer .footer-newsletter .tf-social-icon {
        margin-bottom: 18px;
    }
}

/* The floating Instagram, WhatsApp and back-to-top buttons stay pinned to
   the bottom of the viewport, so the copyright row has to clear them. On
   narrow screens the centred copyright reaches under the buttons on the
   right, which sit up to 130px above the bottom edge. */
.footer .footer-wrap .footer-bottom {
    padding-bottom: 72px;
}

@media (max-width: 767px) {
    .footer .footer-wrap .footer-bottom {
        padding-bottom: 104px;
    }
}

/* ---------------------------------------------------------------
   Mobile product gallery = Medusa Home (product-detail.min.css)
   Ana: slide padding-bottom 59.2%
   Alt: 3 thumb, ayni oran, gri kutu, turuncu aktif #ff6000
   Sadece .thumbs-slider mobil — baska hicbir yere dokunulmaz
   --------------------------------------------------------------- */
@media (min-width: 1150px) {
    .thumbs-slider .tf-product-media-thumbs .swiper-slide .item {
        height: 100%;
        overflow: hidden;
        display: block;
    }

    .thumbs-slider .tf-product-media-thumbs .swiper-slide .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
}
@media (max-width: 1149.98px) {
    /*
     * Profesyonel mobil galeri (Medusa oranlari + urun kalitesi)
     * - Ana: 100vw, %59.2 kutu, object-fit:contain → urun kirpilmaz, orijinal net
     * - 3 thumb, ayni oran, aktif #ff6000
     * - Canvas/JPEG yok — tarayici orijinal full_image gosterir
     * - Sadece .thumbs-slider / urun medya — baska hicbir yere dokunulmaz
     */
    #page-produkt .tf-product-media-wrap,
    .page-section.is-active .tf-product-media-wrap {
        padding: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
    }

    .thumbs-slider {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .thumbs-slider > .tf-product-media-main,
    .thumbs-slider > .tf-product-media-thumbs {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ----- ANA ----- */
    .thumbs-slider .tf-product-media-main {
        width: 100% !important;
        height: auto !important;
        background: #f5f5f5 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .thumbs-slider .tf-product-media-main .swiper-slide {
        position: relative !important;
        height: 0 !important;
        padding-bottom: 59.2% !important;
        box-sizing: border-box !important;
        background-color: #f5f5f5 !important;
    }

    .thumbs-slider .tf-product-media-main .swiper-slide .item,
    .thumbs-slider .tf-product-media-main .swiper-slide a.item,
    .thumbs-slider .tf-product-media-main .swiper-slide .item.border,
    .thumbs-slider .tf-product-media-main .swiper-slide .item.rounded,
    .thumbs-slider .tf-product-media-main .swiper-slide .item.p-1,
    .thumbs-slider .tf-product-media-main .swiper-slide .item.elem {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #f5f5f5 !important;
        display: block !important;
        cursor: zoom-in !important;
    }

    .thumbs-slider .tf-product-media-main .swiper-slide .item img,
    .thumbs-slider .tf-product-media-main .swiper-slide a.item img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        image-rendering: auto !important;
        -webkit-user-drag: none;
        filter: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .thumbs-slider .thumbs-next,
    .thumbs-slider .thumbs-prev,
    .thumbs-slider .swiper-button-next,
    .thumbs-slider .swiper-button-prev {
        display: none !important;
    }

    /* ----- ALT 3 THUMB ----- */
    .thumbs-slider .tf-product-media-thumbs {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        margin-top: 0 !important;
        padding: 10px !important;
        border-radius: 8px !important;
        background-color: #fff !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .thumbs-slider .tf-product-media-thumbs .swiper-wrapper {
        height: auto !important;
        display: flex !important;
        box-sizing: border-box !important;
    }

    .thumbs-slider .tf-product-media-thumbs .swiper-slide {
        width: calc((100% - 20px) / 3) !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 10px 0 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }

    .thumbs-slider .tf-product-media-thumbs .swiper-slide:last-child {
        margin-right: 0 !important;
    }

    .thumbs-slider .tf-product-media-thumbs .swiper-slide .item,
    .thumbs-slider .tf-product-media-thumbs .swiper-slide .item.border,
    .thumbs-slider .tf-product-media-thumbs .swiper-slide .item.rounded,
    .thumbs-slider .tf-product-media-thumbs .swiper-slide .item.p-1 {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 0 !important;
        padding: 0 0 59.2% 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #ececec !important;
        box-sizing: border-box !important;
    }

    .thumbs-slider .tf-product-media-thumbs .swiper-slide .item img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 8px !important;
        filter: none !important;
        transform: none !important;
        image-rendering: auto !important;
    }

    .thumbs-slider .tf-product-media-thumbs .swiper-slide .item::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        border-radius: 8px !important;
        box-shadow: inset 0 0 0 1px #e5e5e5 !important;
        border: 0 !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .thumbs-slider .tf-product-media-thumbs .swiper-slide.swiper-slide-thumb-active .item::after {
        box-shadow: inset 0 0 0 3px #ff6000 !important;
        border: 0 !important;
    }
}

/* The bottom toolbar is not rendered, so its 100px spacer would
   otherwise leave a gap under the footer on mobile. */
@media (max-width: 768px) {
    #mobile {
        height: 0 !important;
    }
}

/* ---------------------------------------------------------------
   Soft transitions — polish only; layout and colors stay the same
   --------------------------------------------------------------- */
:root {
    --sanat-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Page fades need an even curve. The quint ease above is front-loaded and
       reaches ~90% opacity in the first third, which reads as a hard pop. */
    --sanat-fade-ease: cubic-bezier(0.37, 0, 0.28, 1);
    --sanat-hover: 200ms;
    --sanat-dropdown: 280ms;
    --sanat-panel: 330ms;
    --sanat-leave: 300ms;
    --sanat-enter: 700ms;
    /* Must stay in sync with VEIL_IN_MS / VEIL_OUT_MS in assets/js/main.js. */
    --sanat-route-in: 280ms;
    --sanat-route-out: 480ms;
    --sanat-tab-line: 250ms;
}

/* Desktop mega / sub menus: keep opacity+transform only (no transition: all) */
#header .box-nav-ul .sub-menu,
#header .box-nav-ul .mega-menu {
    transform: translateY(8px);
    transition:
        opacity var(--sanat-dropdown) var(--sanat-ease),
        transform var(--sanat-dropdown) var(--sanat-ease),
        visibility 0s linear var(--sanat-dropdown) !important;
}

#header .box-nav-ul .menu-item:hover > .sub-menu,
#header .box-nav-ul .menu-item-2:hover > .sub-menu {
    transform: translateY(0);
    transition:
        opacity var(--sanat-dropdown) var(--sanat-ease),
        transform var(--sanat-dropdown) var(--sanat-ease),
        visibility 0s linear 0s !important;
}

/* Hover bridge so the dropdown does not close while the pointer moves down */
#header .box-nav-ul .menu-item > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

/* Menu links, social icons, common buttons */
#header .box-nav-ul .item-link,
#header .box-nav-ul .menu-heading,
#header .box-nav-ul .menu-link-text,
.tf-social-icon a,
.btn,
.progress-wrap,
.social-btns a,
.footer a,
.card-product .title,
.card-product .btn {
    transition:
        color var(--sanat-hover) var(--sanat-ease),
        background-color var(--sanat-hover) var(--sanat-ease),
        border-color var(--sanat-hover) var(--sanat-ease),
        opacity var(--sanat-hover) var(--sanat-ease),
        transform var(--sanat-hover) var(--sanat-ease);
}

/* Product tab underline / color only (override theme transition: all) */
.widget-tab-3 .nav-tab-item a {
    transition:
        color var(--sanat-tab-line) var(--sanat-ease),
        border-color var(--sanat-tab-line) var(--sanat-ease) !important;
}

#header .box-nav-ul .item-link::before {
    transition: width var(--sanat-hover) var(--sanat-ease) !important;
}

/* Mobile offcanvas panel */
.canvas-mb.offcanvas {
    transition: transform var(--sanat-panel) var(--sanat-ease) !important;
}

.offcanvas-backdrop {
    transition: opacity var(--sanat-panel) var(--sanat-ease) !important;
}

/* Mobile nav accordion chevron */
.nav-ul-mb .btn-open-sub::before,
.nav-ul-mb .btn-open-sub::after {
    transition:
        transform var(--sanat-panel) var(--sanat-ease),
        opacity var(--sanat-hover) var(--sanat-ease);
}

/* Footer mobile accordion marker */
.footer .footer-heading-moblie::after,
.footer .footer-heading-moblie::before {
    transition: transform var(--sanat-panel) var(--sanat-ease), opacity var(--sanat-hover) var(--sanat-ease);
}

/* Bootstrap collapse panels used by the mobile category list */
#mobileMenu .collapse {
    transition: height var(--sanat-panel) var(--sanat-ease);
}

/* Dynamic content crossfade helpers (tabs / category / page sections) */
.sanat-fade-target {
    transition:
        opacity var(--sanat-leave) var(--sanat-fade-ease),
        transform var(--sanat-leave) var(--sanat-fade-ease);
    will-change: opacity, transform;
}

.sanat-fade-target.sanat-content-leave {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
}

.sanat-fade-target.sanat-content-enter {
    animation: sanat-content-in var(--sanat-enter) var(--sanat-fade-ease) both;
}

/* Page to page transition.

   Fading the page sections themselves never stayed smooth: while a page is
   revealed its images load and its grid is rebuilt, so the browser has to
   repaint the very element it is animating and drops most of the frames. This
   plain sheet has nothing to repaint, so the compositor runs it on its own and
   the heavy work happens underneath, out of sight. */
.sanat-route-veil {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    transition: opacity var(--sanat-route-out) var(--sanat-fade-ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sanat-route-veil.is-covering {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--sanat-route-in) var(--sanat-fade-ease);
}

/* Same circular loader Kongur uses (.spinner in theme styles) — route only. */
.sanat-route-veil .sanat-route-spinner {
    width: 56px;
    height: 56px;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: #222;
    border-radius: 100%;
    margin: auto;
    opacity: 0;
    animation: sanat-route-spin 0.85s infinite linear;
    transition: opacity 160ms linear;
}

.sanat-route-veil.is-covering .sanat-route-spinner {
    opacity: 1;
}

@keyframes sanat-route-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* WhatsApp: Kongur keeps the red badge; only pulse stays off. */
#sanat-whatsapp .mx-pulse {
    display: none !important;
}

@keyframes sanat-content-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slideshow crossfade support (Swiper fade effect) */
.tf-slideshow .tf-sw-slideshow .swiper-slide {
    transition-property: opacity;
}

.tf-slideshow .tf-sw-slideshow .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sanat-hover: 1ms;
        --sanat-dropdown: 1ms;
        --sanat-panel: 1ms;
        --sanat-leave: 1ms;
        --sanat-enter: 1ms;
        --sanat-route-in: 1ms;
        --sanat-route-out: 1ms;
        --sanat-tab-line: 1ms;
    }

    #header .box-nav-ul .sub-menu,
    #header .box-nav-ul .mega-menu,
    #header .box-nav-ul .menu-item:hover > .sub-menu,
    .canvas-mb.offcanvas,
    .offcanvas-backdrop,
    .sanat-fade-target,
    .nav-ul-mb .btn-open-sub::before,
    .nav-ul-mb .btn-open-sub::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .sanat-route-veil {
        display: none !important;
    }

    .sanat-fade-target.sanat-content-leave,
    .sanat-fade-target.sanat-content-enter {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}

/* Lightbox — orijinal kalite, urun tam gorunsun */
#lcl_wrap .lcl_image_elem {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #111 !important;
    image-rendering: auto !important;
}

#lcl_wrap img,
#lcl_wrap .lcl_img_cont img {
    image-rendering: auto !important;
    filter: none !important;
}