/* ========================================
   CarbideMatch — Responsive Sticky Header
   Shoptimizer Mega Menu Compatible
   ======================================== */

:root {
    --cm-topbar-height: 0px;
    --cm-admin-height: 0px;
}


/* ========================================
   Top Bar
   ======================================== */

html.cm-sticky-ready .topbar-wrapper {
    position: -webkit-sticky !important;
    position: sticky !important;

    top: var(--cm-admin-height) !important;

    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;

    /*
     * 必须高于普通页面内容。
     * 不设置 transform，避免创建异常的定位环境。
     */
    z-index: 1001 !important;
}


/* ========================================
   Desktop Navigation
   ======================================== */

@media (min-width: 1025px) {

    html.cm-sticky-ready .col-full-nav {
        position: -webkit-sticky !important;
        position: sticky !important;

        top: calc(
            var(--cm-admin-height) +
            var(--cm-topbar-height)
        ) !important;

        margin-top: 0 !important;

        /*
         * Sticky 元素会建立新的层叠上下文，
         * 因此必须确保整个导航高于页面内容。
         */
        z-index: 1000 !important;

        /*
         * Shoptimizer 的 Mega Menu 会超出导航容器，
         * 禁止 Sticky 容器裁剪下拉内容。
         */
        overflow: visible !important;
    }

    html.cm-sticky-ready .col-full-nav .col-full,
    html.cm-sticky-ready .col-full-nav #site-navigation,
    html.cm-sticky-ready .col-full-nav .menu-primary-menu-container,
    html.cm-sticky-ready .col-full-nav .menu-primary-menu {
        overflow: visible !important;
    }

    /*
     * 确保全宽 Mega Menu 位于导航和页面内容上方。
     */
    html.cm-sticky-ready
    .col-full-nav
    .sub-menu-wrapper {
        z-index: 1002 !important;
    }
}


/* ========================================
   Tablet and Mobile
   包括宽度为 1024px 的 iPad
   ======================================== */

@media (max-width: 1024px) {

    /*
     * Elementor Canvas 页面可能设置 overflow，
     * 导致 position: sticky 失效。
     */
    html.cm-sticky-ready
    body.page-template-template-canvas,
    html.cm-sticky-ready
    body.page-template-template-canvas #page {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    html.cm-sticky-ready #masthead {
        position: -webkit-sticky !important;
        position: sticky !important;

        top: calc(
            var(--cm-admin-height) +
            var(--cm-topbar-height)
        ) !important;

        right: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;

        margin-top: 0 !important;

        z-index: 1000 !important;
        overflow: visible !important;
    }
}


/* ========================================
   WordPress Admin Bar
   ======================================== */

/* 桌面登录状态 */
body.admin-bar {
    --cm-admin-height: 32px;
}

/* 手机和平板登录状态 */
@media (max-width: 782px) {

    body.admin-bar {
        --cm-admin-height: 46px;
    }

    body.admin-bar #wpadminbar {
        position: fixed !important;
        top: 0 !important;
    }
}


/* ========================================
   Shoptimizer Cart Drawer
   ======================================== */

/* 购物车抽屉高于 Sticky Header */
.shoptimizer-mini-cart-wrap {
    z-index: 2000 !important;
}

/* 打开购物车抽屉时降低 Header */
body.drawer-open .topbar-wrapper,
body.drawer-open .col-full-nav,
body.drawer-open #masthead {
    z-index: 1 !important;
}


/* ========================================
   Shoptimizer + Addify
   My Account — Quotes 图标修复
   ======================================== */

.woocommerce-MyAccount-navigation
.woocommerce-MyAccount-navigation-link--request-quote > a::before {
    content: "" !important;
    display: block !important;

    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;

    position: relative !important;
    top: 2px !important;

    background-color: #9aa0a6 !important;
    background-image: none !important;
    opacity: 1 !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v5h4'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v5h4'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E") !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;
}

.woocommerce-MyAccount-navigation
.woocommerce-MyAccount-navigation-link--request-quote:hover > a::before,
.woocommerce-MyAccount-navigation
.woocommerce-MyAccount-navigation-link--request-quote.is-active > a::before {
    background-color: #000000 !important;
}


/* ========================================
   CarbideMatch — Order Contact Component
   ======================================== */

.woocommerce-order-received .cm-order-contact {
    clear: both;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 24px 40px;
    align-items: center;

    width: 100%;
    margin: 24px 0 32px;
    padding: 26px 28px;

    border: 1px solid #d9dee8;
    border-left: 5px solid #064bd8;
    border-radius: 4px;
    background: #f6f8fb;
    box-sizing: border-box;
}

.woocommerce-order-received
.cm-order-contact__eyebrow {
    display: block;
    margin-bottom: 7px;

    color: #064bd8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.woocommerce-order-received
.cm-order-contact h2 {
    margin: 0 0 10px;

    color: #162753;
    font-size: 24px;
    line-height: 1.25;
}

.woocommerce-order-received
.cm-order-contact p {
    margin: 0 0 8px;
    line-height: 1.6;
}

.woocommerce-order-received
.cm-order-contact__method {
    margin-bottom: 0;
}

.woocommerce-order-received
.cm-order-contact__actions {
    display: flex;
    flex-direction: column;
    width: 245px;
    gap: 10px;
}

.woocommerce-order-received
.cm-contact-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 46px;
    padding: 10px 16px;

    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;

    border-radius: 3px;
    box-sizing: border-box;
}

.woocommerce-order-received
.cm-contact-button--whatsapp {
    background: #25d366;
}

.woocommerce-order-received
.cm-contact-button--whatsapp:hover {
    background: #1eaf54;
    color: #ffffff !important;
}

.woocommerce-order-received
.cm-contact-button--email {
    background: #064bd8;
}

.woocommerce-order-received
.cm-contact-button--email:hover {
    background: #043cab;
    color: #ffffff !important;
}

.woocommerce-order-received
.cm-order-contact__details {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 8px 24px;

    padding-top: 16px;
    border-top: 1px solid #d9dee8;

    color: #4c5566;
    font-size: 14px;
}

.woocommerce-order-received
.cm-order-contact__details a {
    color: #064bd8;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-order-received
.cm-order-contact__details a:hover {
    text-decoration: underline;
}


/* ========================================
   Order Contact — Mobile
   ======================================== */

@media (max-width: 767px) {

    .woocommerce-order-received
    .cm-order-contact {
        display: block;
        padding: 21px 18px;
    }

    .woocommerce-order-received
    .cm-order-contact h2 {
        font-size: 21px;
    }

    .woocommerce-order-received
    .cm-order-contact__actions {
        width: 100%;
        margin-top: 18px;
    }

    .woocommerce-order-received
    .cm-order-contact__details {
        display: block;
        margin-top: 18px;
    }

    .woocommerce-order-received
    .cm-order-contact__details span {
        display: block;
        margin-top: 6px;
    }
}


/* ========================================
   Contact Form 7
   ======================================== */

.cm-contact-form,
.cm-contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.cm-contact-form .cm-contact-field,
.cm-contact-form input[type="text"],
.cm-contact-form input[type="email"],
.cm-contact-form input[type="tel"],
.cm-contact-form textarea {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
}

.cm-contact-form .phone-fields,
.cm-contact-form .iti,
.cm-contact-form .intl-tel-input {
    width: 100% !important;
    max-width: none !important;
}

.cm-contact-form .wpcf7-form-control-wrap {
    margin-bottom: 16px;
}

.cm-contact-form input,
.cm-contact-form textarea {
    padding: 13px 15px;
    border: 1px solid #ccd8e8;
    border-radius: 4px;
    background: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.cm-contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.cm-contact-form .cm-contact-submit {
    width: 100%;
    padding: 13px 20px;

    border: 1px solid #0145c0;
    border-radius: 4px;

    color: #ffffff;
    background: #0145c0;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.cm-contact-form .cm-contact-submit:hover {
    border-color: #003b9f;
    background: #003b9f;
}

/* Shoptimizer 商品列表：统一为正方形图片区域 */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    background-color: #fff;
}

/* Blog index starts directly below the navigation. */
body.blog #content.site-content,
body.category #content.site-content {
	padding-top: 0 !important;
}