/*
 * TKT Import default-theme responsive layer.
 *
 * This file is intentionally additive: the desktop theme keeps its legacy
 * geometry from 1024px upward, while tablets and phones get a real document-width
 * layout instead of a scaled 980px desktop canvas.
 */

/* Confirmed add-to-cart feedback is visible and readable at every width. */
.tkt-cart-add-status {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-left: 4px solid transparent;
    border-radius: 3px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tkt-cart-add-status:empty {
    display: none;
}

.tkt-cart-add-status[data-state="pending"] {
    border-color: #298aca;
    background: #eef5fb;
    color: #29465d;
}

.tkt-cart-add-status[data-state="success"] {
    border-color: #2e7d46;
    background: #edf8f0;
    color: #205c31;
}

.tkt-cart-add-status[data-state="error"] {
    border-color: #b3261e;
    background: #fff1f0;
    color: #861c17;
}

a.buy-button[data-tkt-cart-state="pending"] {
    cursor: wait;
    opacity: 0.72;
}

@media (max-width: 1023px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    img,
    video,
    iframe,
    object,
    embed {
        max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        font-size: 16px;
    }

    table {
        max-width: 100%;
    }

    #header,
    #footer,
    .footer-container,
    .contnent-container {
        float: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #header {
        height: auto;
    }

    .head-line {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 44px;
        height: auto;
        padding: 0 8px;
        background: #394858;
    }

    .head-line > form {
        position: relative;
        flex: 0 0 auto;
        min-width: 58px;
        height: 44px;
        margin: 0;
    }

    .dropdown-currency,
    .dropdown-language {
        position: relative;
        top: auto;
        left: auto !important;
        width: auto;
        min-width: 58px;
        height: 44px;
        z-index: 520;
    }

    .dropdown-currency dt a,
    .dropdown-language dt a {
        display: flex;
        align-items: center;
        width: auto;
        min-width: 58px;
        min-height: 44px;
        padding: 0 22px 0 8px;
        background-position: right 7px center;
    }

    .dropdown-currency dd,
    .dropdown-language dd {
        position: absolute;
        top: 43px;
        left: 0;
        min-width: 176px;
        background: #f5f7fa;
    }

    .dropdown-currency dd ul li,
    .dropdown-language dd ul li,
    .dropdown-currency dd ul li div.option,
    .dropdown-language dd ul li div.option {
        min-height: 44px;
    }

    .dropdown-currency dd ul li div.option,
    .dropdown-language dd ul li div.option {
        display: flex;
        align-items: center;
    }

    .login-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1 1 auto;
        float: none;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding-left: 24px;
        background-position: left center;
        line-height: 1.25;
        text-align: right;
    }

    .login-container a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 3px;
    }

    .head-body {
        display: grid;
        grid-template-columns: auto minmax(84px, 1fr) 48px;
        align-items: center;
        gap: 8px;
        padding: 8px 12px 10px;
    }

    .logo {
        grid-column: 1;
        grid-row: 1;
        float: none;
        min-width: 0;
    }

    .logo a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .logo img {
        display: block;
        width: auto;
        max-width: 118px;
        max-height: 44px;
        height: auto;
    }

    .input-width {
        grid-column: 2;
        grid-row: 1;
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
    }

    .width-setter {
        width: 100%;
        height: 44px;
        margin: 0;
    }

    .width-setter form {
        width: 100%;
    }

    .width-setter input,
    .width-setter input[style] {
        position: static;
        width: 100% !important;
        height: 44px;
        padding: 8px 9px 8px 32px;
    }

    .cart-container {
        grid-column: 3;
        grid-row: 1;
        float: none;
        width: 48px;
        height: 48px;
        padding: 0;
    }

    .cart-container > a.cart-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        min-height: 48px;
    }

    .cart-container > a.cart-icon > img {
        display: block;
        max-width: 34px;
        max-height: 34px;
    }

    .cart-container a span {
        top: 0;
        right: 0;
    }

    .cart-info-items {
        display: none !important;
    }

    .user-balance-container {
        display: none;
    }

    /* Local theme controls must not cover size choices or the purchase CTA. */
    html body .theme-switcher {
        display: none !important;
    }

    #header .parts {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin: 0;
    }

    #header .parts ul.parts-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 4px;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #header .parts ul.parts-list li.parts-item {
        display: block;
    }

    #header .parts ul.parts-list li.parts-item a.main-link,
    #header .parts ul.parts-list li.parts-item span.main-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 8px 9px;
        font-size: 16px;
        line-height: 1.15;
    }

    #header .parts ul.parts-list li.parts-item div.main-menu-container,
    #header .parts ul.parts-list li.parts-item div.main-menu-info {
        left: 8px;
        right: 8px;
        top: auto;
        width: auto;
        max-width: calc(100vw - 16px);
        padding: 12px;
    }

    #header .parts ul.parts-list li.parts-item div.main-menu-container div.sub-menu-column ul li,
    #header .parts ul.parts-list li.parts-item div.main-menu-info div.sub-menu-column ul li {
        float: none;
        width: 100%;
        min-height: 44px;
    }

    #header .parts ul.parts-list li.parts-item div.main-menu-container a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .body {
        padding: 8px;
    }

    .in-body,
    .colmask,
    .holygrail,
    .holygrail .colmid,
    .holygrail .colleft,
    .holygrail .col1wrap,
    .holygrail .col1,
    .holygrail .col2,
    .holygrail .col3 {
        position: static;
        float: none;
        right: auto;
        left: auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        margin: 0;
    }

    .colmask {
        overflow: visible;
    }

    .holygrail .colmid,
    .holygrail .colleft {
        background: #fff;
    }

    .holygrail .colleft {
        display: flex;
        flex-direction: column;
        border: 0;
    }

    .holygrail .col1wrap {
        order: 1;
    }

    .holygrail .col1 {
        overflow: visible;
        padding-top: 0;
        border: 0;
    }

    .holygrail .col2 {
        order: 2;
        margin-top: 24px;
        border-top: 1px solid #caced2;
        background: #eef5fb;
    }

    /* The desktop recommendation/contact rail must never sit beside a mobile CTA. */
    .holygrail .col3 {
        display: none;
    }

    .breadcrumbs {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .breadcrumbs ul {
        display: flex;
        align-items: stretch;
        width: max-content;
        min-width: 100%;
    }

    .breadcrumbs ul li.link,
    .breadcrumbs ul li.separator {
        float: none;
        flex: 0 0 auto;
    }

    .breadcrumbs ul li.link {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .content,
    div.footer-text,
    h1.aux-page-h1 {
        padding-right: 16px;
        padding-left: 16px;
    }

    h1.category-h1 {
        margin: 18px 16px 0;
        font-size: 24px;
    }

    /* Current catalog grid. */
    ul.products-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 18px;
        width: 100%;
        margin: 20px 0;
        padding: 0 18px;
    }

    ul.products-list li.product-container {
        float: none;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        margin: 0;
    }

    .product-container-content {
        width: 100%;
    }

    .product-container-background,
    ul.products-list li.product-container:hover .product-container-background {
        display: none;
    }

    ul.products-list li.product-container div.picture-container {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    ul.products-list li.product-container div.picture-container a {
        display: block;
        width: 100%;
        height: 100%;
    }

    ul.products-list li.product-container div.picture-container img {
        position: static;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    ul.products-list .product-name,
    ul.products-list .product-type,
    ul.products-list .product-code {
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        overflow-wrap: anywhere;
    }

    ul.products-list .product-name a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .product-container-content form,
    .product-container-content select.select_razmer {
        width: 100%;
    }

    /* Legacy category cards also become a single flowing column. */
    #swap_products,
    #swap_products .prod,
    .product-brief-picture {
        width: 100%;
        max-width: 100%;
    }

    #swap_products .prod {
        float: none;
        margin: 0 0 28px;
    }

    .product-brief-picture > div,
    .product-brief-picture img {
        max-width: 100%;
        background-size: contain !important;
    }

    /* Size selection is touch-first; wrapping is intentional on narrow cards. */
    ul.size-list,
    .product-info-select-size .size-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: auto;
        min-height: 44px;
        margin: 10px 0;
        padding: 0;
    }

    ul.size-list > input {
        position: absolute;
    }

    ul.size-list li,
    ul.size-list li.active-size,
    .size {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        height: auto;
        margin: 0;
        padding: 6px 8px;
        border-width: 1px;
        line-height: 1.15;
    }

    ul.size-list li.active-size {
        border-width: 2px;
    }

    a.buy-button,
    a.buy-button:hover,
    a.buy-button:active {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 48px;
        margin: 10px 0;
        padding: 10px 12px;
        border: 2px solid #298aca;
        line-height: 1.25;
    }

    a.buy-button,
    a.buy-button:active {
        background: #298aca;
        color: #fff;
    }

    a.buy-button > .old-price,
    a.buy-button > span[id^="optionPrice_"] {
        margin-left: 0.35em;
    }

    .product-info-buy-button,
    .product-buy-button {
        width: 100%;
        min-width: 0;
    }

    .not-set-variant {
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 8px 12px;
        background-position: 12px center;
        line-height: 1.25;
    }

    /* Product detail: image, thumbnails, purchase data, then descriptive content. */
    .product-info-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
        gap: 16px 20px;
        width: 100%;
        margin: 0;
        padding: 18px 24px 28px;
    }

    .product-info-container > .product-info-name {
        grid-column: 1 / -1;
        margin: 0;
    }

    .product-main-picture {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .product-main-picture a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .product-main-picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product-info-data {
        grid-column: 2;
        grid-row: 2 / span 2;
        float: none;
        width: 100%;
        min-width: 0;
    }

    .product-info-name-transparent {
        display: none;
    }

    .product-info-code {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .product-info-brief-description {
        height: auto;
        overflow: visible;
    }

    .product-pictures {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
        min-width: 0;
    }

    .product-pictures ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .product-pictures ul li {
        float: none;
        width: 72px;
        height: 72px;
        margin: 0;
    }

    .product-pictures ul li a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .product-pictures ul li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-info-container > .clear {
        display: none;
    }

    .product-info-container > .clear + div {
        grid-column: 1 / -1;
    }

    /* Related products are normal document flow, never an overlay near Buy. */
    .product-info-recommend {
        position: static;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 18px;
        border-top: 1px solid #caced2;
        background: #eef5fb;
    }

    .product-info-recommend-head {
        margin: 0 0 16px;
    }

    .product-info-recommend ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .product-info-recommend ul li {
        float: none;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 8px;
        aspect-ratio: 1 / 1;
    }

    .product-info-recommend ul li .picture-container,
    .product-info-recommend ul li .picture-container a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .product-info-recommend ul li .picture-container img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product-info-recommend ul li .product-info-recommend-data {
        width: 100%;
        max-width: 100%;
    }

    /* Homepage recommendations use the same safe, fluid card geometry. */
    ul.special-offers {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        width: 100%;
        margin: 0;
        padding: 18px;
        list-style: none;
    }

    ul.special-offers li {
        float: none;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 8px;
        aspect-ratio: 1 / 1;
    }

    ul.special-offers li .picture-container,
    ul.special-offers li .picture-container a {
        display: block;
        width: 100%;
        height: 100%;
    }

    ul.special-offers li .picture-container img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    ul.special-offers li .special-offers-data {
        width: 100%;
        max-width: 100%;
    }

    ul.pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 12px 16px;
    }

    ul.pagination li,
    ul.pagination li.current-page,
    ul.pagination li a {
        min-width: 44px;
        min-height: 44px;
    }

    ul.pagination li,
    ul.pagination li.current-page,
    ul.pagination li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    #footer {
        height: auto;
    }

    .footer-container {
        padding: 28px 18px;
    }

    .footer-container ul.parts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }

    .footer-container ul.parts li.part {
        float: none;
        width: 100%;
    }

    .footer-container ul.parts li.part ul li,
    .footer-container ul.parts li.part ul li a {
        min-height: 44px;
    }

    .footer-container ul.parts li.part ul li a {
        display: flex;
        align-items: center;
    }

    .copyrights {
        width: 100%;
        margin-top: 30px;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .head-body {
        grid-template-columns: minmax(82px, 112px) minmax(84px, 1fr) 48px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .logo img {
        max-width: 108px;
    }

    .body {
        padding: 6px;
    }

    ul.products-list,
    ul.special-offers,
    .product-info-recommend ul {
        grid-template-columns: minmax(0, 1fr);
    }

    ul.products-list {
        gap: 32px;
        padding: 0 12px;
    }

    .product-info-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 16px 12px 24px;
    }

    .product-info-container > .product-info-name {
        grid-column: 1;
        grid-row: 1;
        font-size: 21px;
        line-height: 1.25;
    }

    .product-main-picture {
        grid-column: 1;
        grid-row: 2;
        max-width: 520px;
    }

    .product-pictures {
        grid-column: 1;
        grid-row: 3;
        max-width: 520px;
        margin: 0 auto;
    }

    .product-info-data {
        grid-column: 1;
        grid-row: 4;
    }

    .product-info-container > .clear + div {
        grid-column: 1;
        grid-row: 5;
    }

    .product-info-recommend,
    ul.special-offers {
        padding: 14px 12px;
    }

    .product-info-recommend ul li,
    ul.special-offers li {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;
    }

    .footer-container ul.parts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 359px) {
    .head-line {
        padding-right: 4px;
        padding-left: 4px;
    }

    .head-line > form,
    .dropdown-currency,
    .dropdown-language,
    .dropdown-currency dt a,
    .dropdown-language dt a {
        min-width: 52px;
    }

    .login-container {
        padding-left: 0;
        background: none;
        font-size: 12px;
    }

    .head-body {
        grid-template-columns: 88px minmax(78px, 1fr) 44px;
        gap: 6px;
        padding-right: 6px;
        padding-left: 6px;
    }

    .logo img {
        max-width: 88px;
    }

    .cart-container,
    .cart-container > a.cart-icon {
        width: 44px;
        min-height: 44px;
    }

    #header .parts ul.parts-list li.parts-item a.main-link,
    #header .parts ul.parts-list li.parts-item span.main-link {
        padding-right: 7px;
        padding-left: 7px;
        font-size: 15px;
    }
}

/* Keyboard visibility is useful at every width and does not alter layout. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}