/**
* Theme Name:        avanam-cosmika
* Theme URI:         https://templatemela.com/
* Template:          avanam
* Author:            TemplateMela
* Author URI:        #
* Description:       This is a child theme of Avanam, generated by TemplateMela.
* Version:           1.0.0
* License:           GNU General Public License v3.0 (or later)
* License URI:       https://www.gnu.org/licenses/gpl-3.0.html
* Text Domain:       avanam-cosmika
* Requires at least: 6.2
* Tested up to:      6.6
* Requires PHP:      7.4
* Tags: translation-ready, two-columns, right-sidebar, left-sidebar, footer-widgets, blog, custom-logo, custom-background, custom-menu, rtl-language-support, editor-style, threaded-comments, custom-colors, featured-images, wide-blocks, full-width-template, theme-options, e-commerce

*/

/* Product categories widget: highlight the category currently being viewed. */
.tmcore-wp-widget-product-categories-layered-nav li.current-cat > a.item-link {
    font-weight: 600;
}

/* ==========================================================================
   Manrope (self-hosted, variable weight 200-800) – global font
   ========================================================================== */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Theme (Avanam) + Elementor global font variables. */
:root,
body,
body[class*="elementor-kit"] {
    --global-body-font-family: 'Manrope', sans-serif !important;
    --global-heading-font-family: 'Manrope', sans-serif !important;
    --global-primary-nav-font-family: 'Manrope', sans-serif !important;
    --e-global-typography-primary-font-family: 'Manrope' !important;
    --e-global-typography-secondary-font-family: 'Manrope' !important;
    --e-global-typography-text-font-family: 'Manrope' !important;
    --e-global-typography-accent-font-family: 'Manrope' !important;
}

/* Elements that don't always inherit the body font. Icon fonts are left untouched. */
body,
button,
input,
select,
textarea,
optgroup,
h1, h2, h3, h4, h5, h6,
.alpha, .beta, .gamma, .delta, .epsilon, .zeta,
.widget-title,
.woocommerce-loop-product__title,
.menu a,
.elementor-widget .elementor-heading-title,
.elementor-widget .elementor-button,
.elementor-widget .elementor-tab-title,
.elementor-widget .elementor-icon-box-title,
.elementor-widget .elementor-icon-box-description,
.select2-container,
.select2-results__option {
    font-family: 'Manrope', sans-serif !important;
}

/* ==========================================================================
   Out of stock badge: black circle with a zigzag (starburst) edge
   ========================================================================== */
.woocommerce ul.products li.product .cosmika-out-of-stock-badge,
.cosmika-out-of-stock-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    padding: 0 8px;
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .4px;
    text-align: center;
    text-transform: uppercase;
    clip-path: polygon(50.0% 0.0%, 56.3% 6.0%, 64.1% 2.0%, 68.5% 9.5%, 77.0% 7.9%, 79.1% 16.4%, 87.8% 17.3%, 87.4% 25.9%, 95.5% 29.2%, 92.7% 37.5%, 99.5% 42.9%, 94.5% 50.0%, 99.5% 57.1%, 92.7% 62.5%, 95.5% 70.8%, 87.4% 74.1%, 87.8% 82.7%, 79.1% 83.6%, 77.0% 92.1%, 68.5% 90.5%, 64.1% 98.0%, 56.3% 94.0%, 50.0% 100.0%, 43.7% 94.0%, 35.9% 98.0%, 31.5% 90.5%, 23.0% 92.1%, 20.9% 83.6%, 12.2% 82.7%, 12.6% 74.1%, 4.5% 70.8%, 7.3% 62.5%, 0.5% 57.1%, 5.5% 50.0%, 0.5% 42.9%, 7.3% 37.5%, 4.5% 29.2%, 12.6% 25.9%, 12.2% 17.3%, 20.9% 16.4%, 23.0% 7.9%, 31.5% 9.5%, 35.9% 2.0%, 43.7% 6.0%);
    pointer-events: none;
}

/* Sit below the sale badge when a product is both on sale and out of stock. */
.woocommerce ul.products li.product .cosmika-out-of-stock-badge.has-sale-badge {
    top: 44px;
}

.woocommerce ul.products li.product .product-thumbnail {
    position: relative;
}

/* Single product: badge sits on the main gallery image. */
.single-product .base-product-gallery-main .splide__slide a.bt-image-slide {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

.single-product .cosmika-out-of-stock-badge {
    top: 12px;
    left: 12px;
    z-index: 10;
    width: 84px;
    height: 84px;
    font-size: 12px;
}

/* Fallback when the badge is rendered in the summary instead of the gallery. */
.single-product div.summary .cosmika-out-of-stock-badge {
    position: static;
    margin-bottom: 10px;
}

/* ==========================================================================
   Product card "Add to cart" button: white, black border/text, icon + label,
   full width of the card.
   ========================================================================== */
.woocommerce ul.products li.product .product-action-wrap a.button:not(.kb-button) {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    width: 100%;
    min-height: 40px;
    padding: 8px 16px;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: center;
    transition: background-color .2s ease, color .2s ease;
}

.woocommerce ul.products li.product .product-action-wrap a.button:not(.kb-button):hover,
.woocommerce ul.products li.product .product-action-wrap a.button:not(.kb-button):focus {
    background: #000;
    color: #fff;
    border-color: #000;
}

.woocommerce ul.products li.product .product-action-wrap a.button .cart-text {
    margin: 0;
    white-space: nowrap;
}

/* Icon always visible; spinner/check/arrow wrappers must not take up space. */
.woocommerce ul.products li.product .product-action-wrap a.button .add-to-cart-icon {
    display: flex !important;
    align-items: center;
    margin: 0 8px 0 0;
}

.woocommerce ul.products li.product .product-action-wrap a.button .add-to-cart-icon svg {
    width: 18px;
    height: 18px;
    margin: 0;
}

.woocommerce ul.products li.product .product-action-wrap a.button .base-svg-iconset {
    display: contents;
}

/* List view keeps a compact button. */
.woocommerce ul.products.products-list-view li.product .product-action-wrap a.button:not(.kb-button) {
    width: auto;
    min-width: 180px;
    flex: 0 0 auto;
}

/* ==========================================================================
   Product card images: same 4:5 portrait frame for every product, image cropped to fit
   (also applies to the hover/secondary image).
   ========================================================================== */
.woocommerce ul.products li.product .product-thumbnail {
    aspect-ratio: 4 / 5;
}

.woocommerce ul.products li.product .product-thumbnail a.woocommerce-loop-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.woocommerce ul.products li.product .product-thumbnail a.woocommerce-loop-image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.woocommerce ul.products li.product .product-thumbnail a.woocommerce-loop-image-link img.secondary-product-image {
    position: absolute;
    top: 0;
    left: 0;
}

/* ==========================================================================
   Product card titles: always exactly 3 lines tall (longer titles are cut with "…")
   so prices and buttons line up across the grid.
   ========================================================================== */
.woocommerce ul.products:not(.products-list-view) li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    line-height: 1.4;
    min-height: 4.2em;
    max-height: 4.2em;
}

/* ==========================================================================
   Mobile app-style bottom bar: Account | Wishlist | Search
   The real header elements are moved (not duplicated), so the search drawer,
   wishlist counter and login link keep working. Cart/menu stay in the header.
   ========================================================================== */
@media (max-width: 767px) {
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    /* Wrappers collapse so the moved items leave no gap in the header.
       Logged-in users get ".header-mobile-account-in-wrap" instead of ".header-mobile-account-wrap". */
    #mobile-header .site-header-item:has(> .header-mobile-account-wrap),
    #mobile-header .site-header-item:has(> .header-mobile-account-in-wrap),
    #mobile-header .site-header-item:has(> .header-wishlist-wrap),
    #mobile-header .site-header-item:has(> .search-toggle-open-container) {
        display: contents;
    }

    #mobile-header .header-mobile-account-wrap,
    #mobile-header .header-mobile-account-in-wrap,
    #mobile-header .header-wishlist-wrap,
    #mobile-header .search-toggle-open-container {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33.3334%;
        height: calc(56px + env(safe-area-inset-bottom));
        margin: 0;
        padding: 0 0 env(safe-area-inset-bottom);
        background: #fff;
        border-top: 1px solid #e5e5e5;
    }

    #mobile-header .search-toggle-open-container {
        left: 0;
    }

    #mobile-header .header-wishlist-wrap {
        left: 33.3333%;
    }

    #mobile-header .header-mobile-account-wrap,
    #mobile-header .header-mobile-account-in-wrap {
        left: 66.6666%;
    }

    #mobile-header .header-mobile-account-wrap a,
    #mobile-header .header-mobile-account-wrap button,
    #mobile-header .header-mobile-account-in-wrap a,
    #mobile-header .header-mobile-account-in-wrap button,
    #mobile-header .header-wishlist-wrap a,
    #mobile-header .search-toggle-open-container button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    #mobile-header .header-mobile-account-wrap svg,
    #mobile-header .header-mobile-account-in-wrap svg,
    #mobile-header .header-wishlist-wrap svg,
    #mobile-header .search-toggle-open-container svg {
        width: 24px;
        height: 24px;
    }

    /* Keep other bottom-fixed elements above the bar. */
    body #bt-scroll-up,
    body #bt-scroll-up-reader {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    body .woocommerce-notices-wrapper {
        bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   Top bar (inc/cosmika-topbar.php) - replaces the old tmcore-marquee row.
   Change --cosmika-topbar-bg to recolour the bar.
   ========================================================================== */
#masthead .site-top-header-wrap {
    display: none !important;
}

.cosmika-topbar {
    --cosmika-topbar-bg: #000;
    background: var(--cosmika-topbar-bg);
    color: #fff;
}

.cosmika-topbar__inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 10px 20px;
}

/* Phone link with a dashed line after the label. */
.cosmika-topbar__phone {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.cosmika-topbar__phone svg {
    width: 15px;
    height: 15px;
}

.cosmika-topbar__phone::after {
    content: "";
    width: 30px;
    height: 1px;
    margin-left: 16px;
    background: #fff;
}

.cosmika-topbar__phone:hover,
.cosmika-topbar__phone:focus {
    color: #fff;
    opacity: .8;
}

/* Rotating messages, one at a time. */
.cosmika-topbar__scroller {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 25px;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.cosmika-topbar__scroller:active {
    cursor: grabbing;
}

.cosmika-topbar__track {
    display: flex;
}

.cosmika-topbar__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%;
    box-sizing: border-box;
    text-align: center;
}

.cosmika-topbar__slide p {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.7;
    text-transform: uppercase;
}

/* Social icons (circle shape, no fill). */
.cosmika-topbar__social {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.cosmika-topbar__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
}

.cosmika-topbar__social svg {
    width: 17px;
    height: 17px;
}

.cosmika-topbar__social a:hover,
.cosmika-topbar__social a:focus {
    color: #fff;
    opacity: .8;
}

/* Outlined button. */
.cosmika-topbar__button {
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    margin-left: 10px;
    padding: 11.25px 18.75px;
    border: 1px solid #484f56;
    border-radius: 2px;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s ease, border-color .2s ease;
}

.cosmika-topbar__button:hover,
.cosmika-topbar__button:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Tablet and mobile: only the rotating messages, like the reference site. */
@media (max-width: 1024px) {
    .cosmika-topbar__phone,
    .cosmika-topbar__social,
    .cosmika-topbar__button {
        display: none;
    }

    .cosmika-topbar__scroller {
        margin: 0;
    }
}

@media (max-width: 767px) {
    .cosmika-topbar__slide p {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* ==========================================================================
   Free shipping bar + suggested products (inc/cosmika-free-shipping.php)
   Colours: change the two variables below.
   ========================================================================== */
.cosmika-fsb {
    --cosmika-fsb-color: #16a34a;
    --cosmika-fsb-color-light: #4ade80;
    box-sizing: border-box;
    margin: 16px 0;
    padding: 18px 18px 20px;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    background: #f7f8f7;
    text-align: left;
}

.cosmika-fsb--cart {
    margin: 28px 0 0;
    padding: 26px 26px 28px;
}

/* Progress bar: track + coloured fill with the percentage inside, goal icon at the end. */
.cosmika-fsb__bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cosmika-fsb__track {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3e8e4;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

.cosmika-fsb__fill {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 54px;
    height: 100%;
    padding: 0 12px;
    border-radius: 999px;
    background-color: var(--cosmika-fsb-color);
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, .18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .18) 75%, transparent 75%),
        linear-gradient(90deg, var(--cosmika-fsb-color), var(--cosmika-fsb-color-light));
    background-size: 18px 18px, 100% 100%;
    animation: cosmika-fsb-grow .9s cubic-bezier(.22, .8, .3, 1), cosmika-fsb-stripes 1.2s linear infinite;
}

@keyframes cosmika-fsb-grow {
    from {
        width: 0;
    }
}

@keyframes cosmika-fsb-stripes {
    to {
        background-position: 18px 0, 0 0;
    }
}

.cosmika-fsb__percent {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.cosmika-fsb__goal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
    color: #9aa39d;
}

.cosmika-fsb__goal svg {
    width: 17px;
    height: 17px;
}

.cosmika-fsb.is-complete .cosmika-fsb__goal {
    background: var(--cosmika-fsb-color);
    color: #fff;
}

/* Message (extra space above it). */
.cosmika-fsb__message {
    margin: 16px 0 0;
    padding-top: 4px;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

.cosmika-fsb__amount {
    color: #111;
    font-weight: 800;
}

.cosmika-fsb.is-complete .cosmika-fsb__message strong {
    color: var(--cosmika-fsb-color);
}

/* "Suggestions" title with side lines. */
.cosmika-fsb__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    color: #6b726d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cosmika-fsb__title::before,
.cosmika-fsb__title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0, 0, 0, .1);
}

.cosmika-fsb__products {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cosmika-fsb__product {
    margin: 0;
    padding: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: box-shadow .2s ease, transform .2s ease;
}

.cosmika-fsb__product:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.cosmika-fsb__thumb {
    display: block;
    overflow: hidden;
    background: #fff;
}

.cosmika-fsb__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cosmika-fsb__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: #222;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}

.cosmika-fsb__price {
    display: block;
    margin-top: 3px;
    color: #111;
    font-size: 14px;
    font-weight: 800;
}

.cosmika-fsb .cosmika-fsb__add.button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid #000;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .2s ease, color .2s ease;
}

.cosmika-fsb .cosmika-fsb__add.button:hover,
.cosmika-fsb .cosmika-fsb__add.button:focus {
    background: #000;
    color: #fff;
}

.cosmika-fsb .cosmika-fsb__add.button.loading {
    opacity: .6;
}

.cosmika-fsb .added_to_cart {
    display: none;
}

/* Side cart: compact rows. */
.cosmika-fsb--mini {
    flex: 0 0 auto;
    margin: 12px 14px;
    padding: 16px 14px 14px;
}

.cosmika-fsb--mini .cosmika-fsb__products {
    display: grid;
    gap: 8px;
}

.cosmika-fsb--mini .cosmika-fsb__product {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
}

.cosmika-fsb--mini .cosmika-fsb__thumb {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 10px;
}

.cosmika-fsb--mini .cosmika-fsb__info {
    flex: 1 1 auto;
    min-width: 0;
}

.cosmika-fsb--mini .cosmika-fsb__name {
    font-size: 12px;
}

.cosmika-fsb--mini .cosmika-fsb__price {
    font-size: 13px;
}

.cosmika-fsb--mini .cosmika-fsb__add.button {
    padding: 7px 10px;
    font-size: 11px;
}

/* The drawer scrolls as a whole (items + bar) and the subtotal/buttons stay pinned at the bottom,
   so the item list is never squeezed. Short screens show 2 suggestions. */
.base-mini-cart-refresh > ul.woocommerce-mini-cart {
    flex: 0 0 auto;
    overflow: visible;
}

.base-mini-cart-refresh > .widget_shopping_cart_footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    background: #fff;
}

@media (max-height: 780px) {
    .cosmika-fsb--mini .cosmika-fsb__product:nth-child(n+3) {
        display: none;
    }
}

/* Cart page: card grid. */
.cosmika-fsb--cart .cosmika-fsb__products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.cosmika-fsb--cart .cosmika-fsb__product {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
}

.cosmika-fsb--cart .cosmika-fsb__thumb {
    aspect-ratio: 4 / 5;
}

.cosmika-fsb--cart .cosmika-fsb__info {
    flex: 1 1 auto;
    padding: 14px 14px 10px;
}

.cosmika-fsb--cart .cosmika-fsb__add.button {
    width: calc(100% - 28px);
    margin: 0 14px 14px;
}

@media (max-width: 767px) {
    .cosmika-fsb--cart {
        padding: 18px 14px 20px;
    }

    .cosmika-fsb--cart .cosmika-fsb__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cosmika-fsb--cart .cosmika-fsb__info {
        padding: 10px 10px 8px;
    }

    .cosmika-fsb--cart .cosmika-fsb__add.button {
        width: calc(100% - 20px);
        margin: 0 10px 10px;
    }
}