/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

#header [data-row="top"] {
    padding: 20px 0 20px;
    background-color: rgba(40, 45, 51, 0.7);
}

body:not(.home) [data-device="desktop"][data-transparent] {
    position: relative;
    background-color: rgba(40, 45, 51, 1);
}

body:not(.home) #header [data-device="desktop"] [data-row="top"] {
    background-color: rgba(40, 45, 51, 1);
}

/* #header [data-row="top"] .site-branding {

} */

#header [data-column="end"] {
    display: flex;
    align-items: center;
    margin-top: 15px;
    gap: 40px;
}

#header [data-column="end"] .ct-header-text {
    display: flex;
    align-items: center;
    gap: 10px 40px;
}

#header [data-row*="middle"] [data-column="end"] {
    margin-top: 0;
}

.header-top__contacts {
    display: flex;
    align-items: center;
    gap: 10px 38px;
    font-family: Inter;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 999px) {
    .header-top__contacts {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }
}

.header-top__contacts__phones {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
}

.header-top__contacts__phones a {
    color: #AEB6BD;
}

.header-top__contacts__phones a:hover {
    color: #AEB6BD;
}

.header-top__contacts__callme {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

.header-top__contacts__callme a {
    color: #AEB6BD;
}

.header-top__contacts__callme a:hover {
    color: #AEB6BD;
}

[data-header*="type-1"] .ct-header [data-row*="middle"] {
    --height: auto !important;
    min-height: auto !important;
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: rgba(20, 24, 27, 0.8) !important;
}

body:not(.home)[data-header*="type-1"] .ct-header [data-row*="middle"] {
    background-color: rgba(20, 24, 27, 1) !important;
}

/* MENU */

.ct-header .ct-menu-link {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    color: #BBC1C6 !important;
}

/* end: MENU */

/* LOGO */

.site-logo-container img,
.site-logo-container svg,
.site-logo-container picture {
    max-width: 100% !important;
}

[data-header*="type-1"] [data-id="offcanvas-logo"] {
    --logo-max-height: auto;
}

[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
    --logo-max-height: auto;
}

/* end: LOGO */

/* HERO */

.hero-catalog-btn.stk-block-button {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

.hero-catalog-btn a.stk-link {
    background:
        linear-gradient(180deg, #232729 12%, #888788 47%, #232729 81%) padding-box,
        linear-gradient(180deg, #98A5AE 11%, #F2EADD 41%, #EBEBEB 62%, #939EA8 89%) border-box !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #D8E3E8 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 259px !important;
    padding: 14px 24px !important;
    box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

.hero-catalog-btn a.stk-link .stk-button__inner-text {
    color: inherit !important;
}

.hero-catalog-btn a.stk-link::before,
.hero-catalog-btn a.stk-link::after {
    display: none !important;
}

.hero-catalog-btn a.stk-link:hover {
    filter: brightness(1.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.6) !important;
}

/* end: HERO */

/* BREADCRUMBS */

.site-breadcrumbs {
    padding: 25px 0;
}

.site-breadcrumbs .woocommerce-breadcrumb {
    font-size: 14px;
    color: #111111;
}

.site-breadcrumbs .woocommerce-breadcrumb a {
    color: #696C71;
}

/* end: BREADCRUMBS */

/* BTNS */

.is-style-upp-metal a.stk-link {
    /* 90deg робить градієнт горизонтальним, як у Figma */
    background:
        linear-gradient(90deg, #23272B 12%, #98928B 47%, #23272B 81%) padding-box,
        linear-gradient(180deg, #98A5AE 11%, #F2EADD 41%, #EBEBEB 62%, #939EA8 89%) border-box !important;

    border: 2px solid transparent !important;
    border-radius: 8px !important;

    /* Тінь Drop Shadow з Figma */
    box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.5) !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

/* Прибираємо зайві ефекти теми */
.is-style-upp-metal a.stk-link::before,
.is-style-upp-metal a.stk-link::after {
    display: none !important;
}

/* Ефект при наведенні - посилюємо металевий блиск */
.is-style-upp-metal a.stk-link:hover {
    background:
        linear-gradient(90deg, #2d3235 12%, #b5b0aa 47%, #2d3235 81%) padding-box,
        linear-gradient(180deg, #98A5AE 11%, #F2EADD 41%, #EBEBEB 62%, #939EA8 89%) border-box !important;
    transform: translateY(-2px) !important;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.6) !important;
}

.is-style-upp-metal a.stk-link:active {
    transform: translateY(1px) !important;
}

.ct-header-cta .ct-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 129px !important;
    height: 31px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #DBE3E9 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    background:
        linear-gradient(#0F1215, #0F1215) padding-box,
        linear-gradient(180deg, #A6A8A9 11%, #FFFAF1 41%, #EBEBEB 62%, #A2A5A8 89%) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s ease !important;
}

.ct-header-cta .ct-button:hover {
    filter: brightness(1.3) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .is-style-upp-metal a.stk-link {
        min-width: 100% !important;
    }
}

.footer-btn .is-style-upp-metal a {
    padding-right: 60px !important;
    padding-left: 60px !important;
    text-transform: uppercase;
}

@media (max-width: 899px) {
    .footer-btn .is-style-upp-metal a {
        padding-right: 30px !important;
        padding-left: 30px !important;
    }
}

@media (min-width: 1000px) {
    .footer-btn--right .stk-button-group {
        justify-content: end !important;
    }
}

/* end: BTNS */

/* FOOTER */

.footer__contacts__item.footer__contacts__item--phones .stk-row {
    align-items: flex-start;
}

.footer__contacts__item.footer__contacts__item--phones .wp-block-stackable-icon {
    padding-top: 7px;
}

.footer__contacts .wp-block-stackable-icon-label {
    margin-bottom: 20px;
}

.footer__contacts .footer__contacts__item.footer__contacts__item--worktime {
    margin-bottom: 3px;
}

.footer__contacts .stk-block-heading__text a {
    color: #DDE3E8;
}

/* FOOTER MENU  */

[data-footer*="type-1"] .ct-footer {
    background-image: url('assets/images/footer-bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

[data-footer*="type-1"] .ct-footer [data-row*="top"] {
    padding-top: 60px;
}

[data-footer*="type-1"] .ct-footer [data-row*="middle"]>div {
    --container-spacing: 40px;
}

[data-footer*="type-1"] .ct-footer [data-row*="bottom"] {
    background-color: #191E22;
}

.ct-footer-copyright {
    font-size: 14px;
    color: #A1A4A6 !important;
}

@media (min-width: 1000px) {
    .ct-footer .footer__menu__container .stk-block.stk-column {
        border-right: 1px solid rgba(250, 200, 144, 0.1);
        padding-right: 8px;
    }

    .ct-footer .footer__menu__container .stk-block.stk-column:last-child {
        border-right: none;
        padding-right: 0;
    }
}

@media (max-width: 999px) {
    [data-footer*="type-1"] .ct-footer [data-row*="top"] .ct-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }
}

@media (max-width: 689px) {
    [data-footer*="type-1"] .ct-footer [data-row*="top"] .ct-container {
        display: flex;
        flex-direction: column;
        align-items: start;
    }
}

@media (max-width: 575px) {
    [data-footer*="type-1"] .ct-footer [data-row*="top"] .ct-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.ct-footer .footer__menu__container .stk-block.stk-block-column.stk-column>.stk-column-wrapper {
    margin: 0;
}

.ct-footer .footer__menu__container>.stk-block-content {
    gap: 30px 8px;
}

@media (max-width: 689px) {
    .ct-footer .footer__menu__container>.stk-block-content {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ct-footer .footer__menu__container>.stk-block-content>div {
        flex: 0 0 calc(33.333% - 8px);
        box-sizing: border-box;
    }
}

@media (max-width: 575px) {
    .ct-footer .footer__menu__container>.stk-block-content>div {
        flex: 0 0 calc(50% - 8px);
        box-sizing: border-box;
    }
}

@media (max-width: 399px) {
    .ct-footer .footer__menu__container>.stk-block-content {
        flex-direction: column;
    }

    .ct-footer .footer__menu__container>.stk-block-content>div {
        flex: 0 0 100%;
        box-sizing: border-box;
    }
}

.ct-footer .footer__menu__container .widget_nav_menu ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 15px !important;
}

.ct-footer .footer__menu__container .widget_nav_menu .widget-menu>li>a {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    color: #DDE3E8 !important;
    padding: 0 !important;
    /* pointer-events: none; */
}

.ct-footer .footer__menu__container .widget_nav_menu ul.sub-menu li {
    position: relative;
    padding-left: 18px !important;
    margin-bottom: 6px !important;
}

.ct-footer .footer__menu__container .widget_nav_menu ul.sub-menu li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.48517 1.23419C3.52 1.19927 3.56139 1.17156 3.60694 1.15266C3.6525 1.13375 3.70134 1.12402 3.75067 1.12402C3.8 1.12402 3.84884 1.13375 3.8944 1.15266C3.93995 1.17156 3.98134 1.19927 4.01617 1.23419L8.51617 5.73419C8.55109 5.76903 8.5788 5.81041 8.5977 5.85597C8.61661 5.90153 8.62634 5.95037 8.62634 5.99969C8.62634 6.04902 8.61661 6.09786 8.5977 6.14342C8.5788 6.18898 8.55109 6.23036 8.51617 6.26519L4.01617 10.7652C3.94576 10.8356 3.85025 10.8752 3.75067 10.8752C3.65109 10.8752 3.55559 10.8356 3.48517 10.7652C3.41476 10.6948 3.3752 10.5993 3.3752 10.4997C3.3752 10.4001 3.41476 10.3046 3.48517 10.2342L7.72042 5.99969L3.48517 1.76519C3.45025 1.73036 3.42254 1.68898 3.40364 1.64342C3.38473 1.59786 3.375 1.54902 3.375 1.49969C3.375 1.45037 3.38473 1.40153 3.40364 1.35597C3.42254 1.31041 3.45025 1.26903 3.48517 1.23419Z" fill="%23DDE3E8"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.ct-footer .footer__menu__container .widget_nav_menu ul.sub-menu li a {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    line-height: 180% !important;
    color: #DDE3E8 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    display: block !important;
}

.ct-footer .footer__menu__container .widget_nav_menu ul.sub-menu li a:hover {
    color: #ffffff !important;
}

.ct-footer .footer__menu__container .widget_nav_menu .ct-toggle-dropdown-desktop {
    display: none !important;
}

/* end: FOOTER MENU  */

/* end: FOOTER */

/* HEADINGS */

.page-title {
    font-family: 'Oswald', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #111111;
    padding: 0;
    margin: 0 0 20px 0;
}

@media (max-width: 899px) {
    .page-title {
        font-family: 'Oswald', sans-serif;
        font-size: 48px;
    }
}

/* OUR SERVICES */

/* .silver-gradient-border {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: inset 0 0 0 1.5px #CCCAC7 !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%) !important;
    background-color: rgba(17, 17, 17, 0.2) !important;
} */

.silver-gradient-border {
    background-color: rgba(17, 17, 17, 0.2) !important;
    border-radius: 8px !important;
    border: none !important;
    position: relative;
    box-shadow:
        inset 0px 1px 1px rgba(255, 255, 255, 0.3),
        inset 0px 0px 0px 1.5px rgba(100, 98, 98, 0.5) !important;
}

.silver-gradient-border::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%) !important;
    pointer-events: none;
    z-index: 0;
}

.services-link a {
    display: inline-flex !important;
    align-items: center;
}

/* end: OUR SERVICES */

/* ABOUT */

.stats-grid-container {
    position: relative !important;
    overflow: visible !important;
}

.stats-grid-container .stk-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
}

.stats-grid-container .stk-column .stk-block-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.stats-grid-container .wp-block-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 40px !important;
    margin: 0 !important;
}

.stats-grid-container .stk-column:first-child {
    border-right: 0.5px solid rgba(250, 200, 144, 0.2) !important;
    position: relative;
    z-index: 2;
}

.stats-grid-container .wp-block-group:first-child {
    border-bottom: 0.5px solid rgba(250, 200, 144, 0.2) !important;
    position: relative;
    z-index: 2;
}

.stats-grid-container .stk-column,
.stats-grid-container .stk-column-wrapper,
.stats-grid-container .stk-block-content {
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .stats-grid-container .stk-row {
        display: block !important;
    }

    .stats-grid-container .stk-column:first-child {
        border-right: none !important;
    }

    .stats-grid-container .wp-block-group {
        border-bottom: 0.5px solid rgba(250, 200, 144, 0.2) !important;
        padding: 30px 20px !important;
    }

    .stats-grid-container .stk-column:last-child .wp-block-group:last-child {
        border-bottom: none !important;
    }

    .stats-grid-container .wp-block-group {
        text-align: center !important;
        align-items: center !important;
    }
}

/* end: ABOUT */

/* CATEGORIES */

.ratio-16-9 {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

@media (max-width: 767px) {
    .ratio-16-9 {
        aspect-ratio: 16 / 9;
    }
}

.product-category-btn {
    width: 100% !important;
}

.product-category-btn a {
    display: flex;
    justify-content: space-between !important;
}

/* end: CATEGORIES */

/* LCBM */

/* Основний контейнер сітки */
.advantages-inner-grid .stk-inner-blocks.stk-block-content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    /* ПРИБРАНО: зовнішні межі контейнера */
    border: none !important;
}

/* Кожна комірка */
.advantages-inner-grid .wp-block-group {
    display: flex !important;
    flex-direction: column !important;
    /*justify-content: center !important;*/
    align-items: center !important;
    padding: 40px 20px !important;
    margin: 0 !important;
    min-height: 180px !important;
    box-sizing: border-box !important;

    /* Тільки права та нижня межі за замовчуванням */
    border-right: 0.5px solid rgba(250, 200, 144, 0.2) !important;
    border-bottom: 0.5px solid rgba(250, 200, 144, 0.2) !important;
}

/* --- ДЕСКТОП (3 колонки) --- */
@media (min-width: 1000px) {

    /* Прибираємо праву межу у кожного 3-го */
    .advantages-inner-grid .wp-block-group:nth-child(3n) {
        border-right: none !important;
    }

    /* Прибираємо нижню межу у останнього ряду (4, 5, 6) */
    .advantages-inner-grid .wp-block-group:nth-last-child(-n+3) {
        border-bottom: none !important;
    }
}

/* --- ПЛАНШЕТ (2 колонки) --- */
@media (max-width: 999px) and (min-width: 768px) {
    .advantages-inner-grid .stk-inner-blocks.stk-block-content {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Повертаємо праву межу всім (бо 3n тут не працює) */
    .advantages-inner-grid .wp-block-group {
        border-right: 0.5px solid rgba(250, 200, 144, 0.2) !important;
    }

    /* Прибираємо праву межу у кожного ПАРНОГО (2, 4, 6) */
    .advantages-inner-grid .wp-block-group:nth-child(2n) {
        border-right: none !important;
    }

    /* Прибираємо нижню межу у останніх ДВОХ (5, 6) */
    .advantages-inner-grid .wp-block-group:nth-last-child(-n+2) {
        border-bottom: none !important;
    }
}

/* --- МОБІЛЬНІ (1 колонка) --- */
@media (max-width: 767px) {
    .advantages-inner-grid .stk-inner-blocks.stk-block-content {
        grid-template-columns: 1fr !important;
    }

    .advantages-inner-grid .wp-block-group {
        border-right: none !important;
        /* У одній колонці немає правих меж */
        padding: 30px 15px !important;
    }

    /* Прибираємо нижню межу тільки у самого останнього блоку */
    .advantages-inner-grid .wp-block-group:last-child {
        border-bottom: none !important;
    }
}

/* end: LCBM */

/* POPUP FORM */

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
}

.popup-content {
    background: #434649;
    border-radius: 6px;
    padding: 30px 25px;
    width: 100%;
    max-width: 480px;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    line-height: 1;
    color: #DBE3E9;
    background: transparent;
    border: none;
}

.callback-form {
    text-align: center;
}

.callback-form h3 {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #DBE3E9;
    padding: 0;
    margin: 0 0 15px 0;
}

.callback-form input,
.callback-form textarea {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 15px;
    padding: 15px 20px !important;
    border: 1px solid #B9C3CA !important;
    background-color: #FDFEFF !important;
    border-radius: 6px !important;
}

.callback-form textarea {
    max-height: 155px;
}

.submit-btn {
    padding: 10px 35px !important;
}

.submit-btn {
    background:
        linear-gradient(90deg, #23272B 12%, #98928B 47%, #23272B 81%) padding-box,
        linear-gradient(180deg, #98A5AE 11%, #F2EADD 41%, #EBEBEB 62%, #939EA8 89%) border-box !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.submit-btn::before,
.submit-btn::after {
    display: none !important;
}

.submit-btn:hover {
    background:
        linear-gradient(90deg, #2d3235 12%, #b5b0aa 47%, #2d3235 81%) padding-box,
        linear-gradient(180deg, #98A5AE 11%, #F2EADD 41%, #EBEBEB 62%, #939EA8 89%) border-box !important;
    transform: translateY(-2px) !important;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.6) !important;
}

.submit-btn:active {
    transform: translateY(1px) !important;
}

#product-info {
    border: none !important;
    background: transparent !important;
    border-radius: 0;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #FAC890;
    padding: 0 !important;
    margin: 0;
}

/* Контейнер для повідомлення */
.wpcf7-response-output {
    font-size: 12px !important;
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeeba !important;
    border-radius: 4px;
    padding: 6px 15px !important;
}

/* Стиль при успішній відправці */
.wpcf7-mail-sent-ok,
.wpcf7-form.sent .wpcf7-response-output {
    font-size: 12px !important;
    color: #4CAF50;
    background-color: #DFF2BF;
    border: 1px solid #4CAF50 !important;
    border-radius: 4px;
    padding: 6px 15px !important;
}

/* Стиль при помилці */
.wpcf7-validation-errors,
.wpcf7-acceptance-missing,
.wpcf7-not-valid-tip {
    font-size: 12px !important;
    color: #cc0033;
    background-color: #fce4e4;
    border: 1px solid #cc0033 !important;
    border-radius: 4px;
    padding: 6px 15px !important;
}

/* end: POPUP FORM */

/* CATALOG CATEGORY PAGE */

.woocommerce-products-header {
    padding: 50px 0;
    text-align: center;
}

@media (max-width: 899px) {
    .woocommerce-products-header {
        padding: 0 0 50px 0;
    }
}

.woocommerce-products-header .sub-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    color: #111111;
    margin-bottom: 20px;
}

.custom-subcat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
    gap: 50px 20px;
    padding: 0 0 140px;
    max-width: 1052px;
    margin: 0 auto;
}

.subcat-card {
    overflow: visible;
    position: relative;
}

.subcat-card-inner {
    background: #fff;
    border: 1px solid #DBE3E9;
    border-radius: 4px;
    margin-bottom: 10px;
}

.subcat-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: #6C6D6E;
    background: linear-gradient(90deg, rgba(108, 109, 110, 1) 30%, rgba(10, 15, 20, 0) 100%);
    border-radius: 4px;
    color: #111111;
    padding: 9px 15px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-size: 16px;
    z-index: 2;
}

.subcat-image-link {
    position: relative;
    display: flex;
    padding-top: 92%;
    z-index: 1;
}

.subcat-image-link img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    border: none !important;
    border-radius: 0 !important;
}

.subcat-drop-btn {
    width: 100%;
    background: #434649;
    border-radius: 6px;
    color: #DBE3E9;
    border: none;
    padding: 5px 16px 8px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.subcat-drop-content {
    display: none;
    /* Для початку сховаємо */
    background: #434649;
    color: #DBE3E9;
    padding: 0 20px 15px;
    border-radius: 0 0 6px 6px;
}

.subcat-drop-content ul {
    list-style: none;
    padding: 20px 0 10px;
    margin: 0;
}

.subcat-drop-content li a {
    color: #DBE3E9;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

.subcat-drop-content li a:hover {
    color: #c9a56a;
}

.view-more {
    color: #c9a56a;
    font-size: 12px;
    text-decoration: none;
}

.view-more span {
    color: #D1D1D1;
}

.view-more:hover {
    color: #c9a56a;
}

.subcat-dropdown:hover .subcat-drop-content {
    display: block;
}

.subcat-dropdown:hover .subcat-drop-btn {
    border-radius: 6px 6px 0 0;
}

.stock-bars {
    display: flex;
    gap: 2px;
    /* Відстань між прямокутниками */
    align-items: center;
    justify-content: center;
}

.stock-bars .bar {
    display: block;
    width: 14px;
    /* Ширина прямокутника */
    height: 8px;
    /* Висота прямокутника */
    border: 1px solid #14181B;
    /* Тонка обводка, як на скріні */
    background-color: transparent;
}

.stock-bars .bar.fill {
    background-color: #14181B;
    /* Колір залишки (чорний/темно-сірий) */
}

.subcategory-hero-section {
    display: flex;
    gap: 15px;
    margin: 0 auto 75px;
    max-width: 1052px;
}

@media (max-width: 899px) {
    .subcategory-hero-section {
        flex-direction: column;
    }
}

.subcat-visual img {
    border: 1px solid #DBE3E9;
    border-radius: 4px;
    max-width: 177px;
}

.filter-label {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #111111;
    padding: 0;
    margin: 0 0 25px;
}

.marks-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mark-badge {
    font-size: 14px;
    font-weight: 500;
    border: none;
    background: #DBE3E9;
    color: #1a1a1a;
    padding: 7px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mark-badge.is-active {
    background: #434649;
    /* Темно-сірий як на макеті */
    color: #ffffff;
}

.mark-badge:hover:not(.is-active) {
    background: #cbd5e1;
    color: #1a1a1a;
}

/* Позиціонування заголовка з підказкою */
.th-stock-hint {
    position: relative;
    cursor: help; /* Змінює курсор на знак питання при наведенні */
}

/* Створення блоку підказки */
.th-stock-hint::after {
    content: attr(data-hint);
    position: absolute;
    bottom: 125%; /* Показувати над заголовком */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #222222;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: normal;
    text-transform: none;
    white-space: pre-line; /* Дозволяє переносити рядки */
	text-align: left;
    width: 280px; /* Фіксована ширина підказки */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Трикутник під підказкою */
.th-stock-hint::before {
    content: "";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border-width: 6px;
    border-style: solid;
    border-color: #222222 transparent transparent transparent;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Поява підказки при наведенні */
.th-stock-hint:hover::after,
.th-stock-hint:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.products-table-wrapper {
    padding-bottom: 50px;
    max-width: 1052px;
    margin: 0 auto;
}

.metal-data-table {
    border: none;
}

.metal-data-table th,
.metal-data-table td {
    border: none;
}

.metal-data-table th,
.metal-data-table td {
    border-bottom: 2px solid #ffffff;
}

.metal-data-table thead th {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    color: #DBE3E9 !important;
    background: #6B6F72;
    text-align: center;
}

.metal-data-table tbody td {
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 100% !important;
    letter-spacing: 0.01em !important;
    color: #14181B !important;
    background: #EDF0F3;
    text-align: center;
    padding: 15px 35px;
}

.metal-data-table tbody tr:hover td {
    background: #DBE3E9;
}

.get-price {
    font-size: 14px;
    font-weight: 500;
    color: #14181B;
    /* text-decoration: underline; */
    border-bottom: 1px solid #14181B;
}

.get-price:hover {
    color: #14181B !important;
    border-bottom: 1px solid transparent;
}

@media screen and (max-width: 768px) {
    .metal-data-table {
        border: 0;
    }

    /* Ховаємо стандартний заголовок */
    .metal-data-table thead {
        display: none;
    }

    .metal-data-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 10px;
        background: #fff;
    }

    .metal-data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 8px 5px;
        border-bottom: 1px solid #f9f9f9;
        font-size: 14px;
    }

    .metal-data-table td:last-child {
        border-bottom: 0;
    }

    /* Виводимо назву колонки перед значенням */
    .metal-data-table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 12px;
        color: #666;
        float: left;
        margin-right: 15px;
    }

    /* Спеціальні стилі для ціни та наявності на мобілці */
    .td-price .get-price {
        width: auto;
        /* padding: 5px 15px; */
    }

    .stock-bars {
        justify-content: flex-end;
        /* Вирівнюємо бари наявності вправо */
    }
}

/* end: CATALOG CATEGORY PAGE */

/* CONTACTS PAGE */

.contact-link a {
	text-decoration: none;
	color: #4d5d6d;
}

.contact-col:hover .contact-link a,
.contact-link a:hover {
	text-decoration: none;
	color: #F3F5F9;
}

/* end: CONTACTS PAGE */