/*
 * Mobile product catalog layout based on Figma node 688:2062.
 * Applies only after archive-catalog-mobile.js confirms a product catalog page.
 */

@media (max-width: 1024px) {
    body.kaman-mobile-catalog-ready .kaman-archive > .container {
        width: 100%;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__breadcrumb {
        margin: 0;
        padding: 8px 16px 4px;
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        color: var(--kaman-color-text-muted, #898989);
        font-size: 12px;
        line-height: 24px;
        white-space: nowrap;
        scrollbar-width: none;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__breadcrumb::-webkit-scrollbar,
    body.kaman-mobile-catalog-ready .kaman-archive__chips::-webkit-scrollbar {
        display: none;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__chips {
        width: 100%;
        margin: 0;
        padding: 8px 16px 4px;
        display: flex;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__chip {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 8px 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--kaman-color-text-muted, #898989);
        background: #fff;
        border: 1px solid var(--kaman-color-border, #ebebeb);
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__chip.is-active {
        color: var(--kaman-color-primary, #aa0002);
        border-color: rgba(170, 0, 2, 0.35);
    }

    body.kaman-mobile-catalog-ready .kaman-archive__layout {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__content {
        width: 100%;
        min-width: 0;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__toolbar {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 14px 16px 12px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        background: #fff;
        border: 0;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__sort {
        display: none !important;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__mobile-controls {
        position: relative;
        z-index: 15;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        direction: rtl;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__filters-trigger,
    body.kaman-mobile-catalog-ready .kaman-archive__mobile-sort-button {
        position: static !important;
        inset: auto !important;
        width: auto;
        height: 34px;
        min-height: 34px;
        margin: 0 !important;
        padding: 8px 20px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #303030;
        background: #fff;
        border: 1px solid var(--kaman-color-border, #ebebeb);
        border-radius: 8px;
        box-shadow: none !important;
        font-family: var(--kaman-font-family, "Dana2", "Dana", sans-serif);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__filters-trigger {
        min-width: 100px;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__filters-trigger::before {
        content: "\f1de";
        font-family: "Font Awesome 5 Free";
        font-size: 14px;
        font-weight: 900;
        line-height: 1;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__mobile-sort-button::before {
        content: "\f160";
        font-family: "Font Awesome 5 Free";
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__mobile-sort {
        position: relative;
        min-width: 0;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__mobile-sort-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 100;
        width: min(250px, calc(100vw - 32px));
        padding: 6px;
        display: none;
        flex-direction: column;
        gap: 2px;
        background: #fff;
        border: 1px solid var(--kaman-color-border, #ebebeb);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    }

    body.kaman-mobile-catalog-ready .kaman-archive__mobile-sort.is-open .kaman-archive__mobile-sort-menu {
        display: flex;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__mobile-sort-menu a {
        min-height: 40px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--kaman-color-text-secondary, #696969);
        border-radius: 7px;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__mobile-sort-menu a.is-active {
        color: var(--kaman-color-primary, #aa0002);
        background: rgba(170, 0, 2, 0.05);
    }

    body.kaman-mobile-catalog-ready .kaman-archive__count {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        color: var(--kaman-color-text-secondary, #696969);
        background: transparent;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__count strong {
        color: #282828;
        font-weight: 400;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__grid {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
        background: #fff;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card {
        position: relative;
        width: 100%;
        min-height: 172px;
        margin: 0;
        padding: 16px;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 120px;
        grid-template-rows: auto minmax(58px, 1fr) auto;
        grid-template-areas:
            "title media"
            "price media"
            "countdown colors";
        column-gap: 12px;
        row-gap: 10px;
        direction: ltr;
        background: #fff;
        border: 0;
        border-bottom: 1px solid var(--kaman-color-border, #ebebeb);
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__badge {
        display: none !important;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__media {
        grid-area: media;
        width: 120px;
        height: 120px;
        min-width: 120px;
        margin: 0;
        padding: 0;
        align-self: start;
        justify-self: end;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        border-radius: 0;
        overflow: hidden;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__image {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__image img {
        width: 100%;
        height: 100%;
        padding: 4px;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__title {
        grid-area: title;
        min-width: 0;
        margin: 0;
        padding: 0;
        align-self: start;
        direction: rtl;
        color: #282828;
        font-family: var(--kaman-font-family, "Dana2", "Dana", sans-serif);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.65;
        text-align: right;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__title a {
        color: inherit;
        text-decoration: none;
    }

    body.kaman-mobile-catalog-ready .kaman-archive__price {
        grid-area: price;
        min-width: 0;
        margin: 0;
        padding: 0;
        align-self: end;
        direction: rtl;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        gap: 2px;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__old {
        width: 100%;
        min-height: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__old-price {
        margin: 0;
        color: #898989;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
        text-decoration: line-through;
        white-space: nowrap;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__percent {
        min-width: 55px;
        min-height: 22px;
        padding: 4px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: var(--kaman-color-danger, #dc2626);
        border-radius: 24px;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
        white-space: nowrap;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__price-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__price {
        display: flex;
        align-items: center;
        gap: 4px;
        direction: rtl;
        white-space: nowrap;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__price span {
        color: #282828;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__price small,
    body.kaman-mobile-catalog-ready .kaman-archive-card__old-price::after {
        color: #898989;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__status {
        color: var(--kaman-color-danger, #dc2626);
        font-size: 13px;
        font-weight: 500;
        text-align: right;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__countdown {
        grid-area: countdown;
        position: static !important;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        align-self: center;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        direction: ltr;
        color: var(--kaman-color-danger, #dc2626);
        background: transparent;
        border: 0;
        border-radius: 0;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__countdown::before {
        content: "\f017";
        font-family: "Font Awesome 5 Free";
        font-size: 13px;
        font-weight: 400;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__colors {
        grid-area: colors;
        width: auto;
        min-height: 12px;
        margin: 0;
        padding: 0;
        align-self: center;
        justify-self: end;
        display: none;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
        direction: rtl;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__colors.has-real-colors {
        display: flex !important;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-card__dot {
        width: 8px;
        height: 8px;
        flex: 0 0 8px;
        border: 1px solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

    body.kaman-mobile-catalog-ready .kaman-archive__pagination {
        padding: 20px 16px;
    }

    body.kaman-mobile-catalog-ready .kaman-archive-description {
        margin-right: 16px;
        margin-left: 16px;
    }

    @media (max-width: 380px) {
        body.kaman-mobile-catalog-ready .kaman-archive-card {
            grid-template-columns: minmax(0, 1fr) 104px;
        }

        body.kaman-mobile-catalog-ready .kaman-archive-card__media {
            width: 104px;
            height: 104px;
            min-width: 104px;
        }

        body.kaman-mobile-catalog-ready .kaman-archive__filters-trigger,
        body.kaman-mobile-catalog-ready .kaman-archive__mobile-sort-button {
            padding-right: 14px;
            padding-left: 14px;
        }
    }
}