/* Mobile / touch adaptations — loaded after base + theme CSS */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    :root {
        --pad: 16px;
    }

    .container-wide {
        width: min(var(--container), 100% - var(--pad));
    }

    .announcement {
        font-size: 11px;
        padding: 8px 12px;
        line-height: 1.4;
    }

    .header-bar {
        grid-template-columns: 1fr auto 1fr;
        min-height: 56px;
        gap: 8px;
    }

    .menu-toggle {
        justify-self: start;
    }

    .logo-link {
        justify-self: center;
        min-width: 0;
        flex-shrink: 0;
    }

    .site-logo {
        gap: 8px;
    }

    .site-logo-mark {
        width: 34px;
        height: 34px;
    }

    .site-logo-name {
        font-size: 18px;
    }

    .site-logo-tld {
        font-size: 12px;
    }

    .logo-text {
        display: block;
        font-size: 12px;
        letter-spacing: 0.1em;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }

    .header-icons {
        gap: 8px;
        justify-self: end;
    }

    .header-cart-link {
        display: none;
    }

    .icon-btn {
        min-width: 40px;
        min-height: 40px;
        justify-content: center;
    }

    .search-panel {
        padding: 16px 0 24px;
    }

    .search-panel-top {
        gap: 8px;
    }

    .search-close {
        font-size: 28px;
        padding: 2px 4px;
    }

    .search-form input {
        font-size: 16px;
    }

    .page-title-bar {
        padding: 24px 0 16px;
    }

    .page-title-bar h1 {
        font-size: 22px;
        line-height: 1.2;
        word-break: break-word;
    }

    .collection-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px 0;
    }

    .cart-line {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
    }

    .cart-line-total {
        grid-column: 2;
        text-align: left;
        white-space: normal;
    }

    .cart-summary {
        position: static;
        top: auto;
    }

    .cart-panel {
        width: 100%;
        max-width: 100%;
        padding: 20px 16px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .payment-icons {
        justify-content: center;
    }

    .policy-content h1 {
        font-size: 26px;
    }

    .policy-content {
        overflow-wrap: anywhere;
    }

    .product-add-row {
        flex-direction: column;
        gap: 10px;
    }

    .product-add-row .tks-qty-wrap {
        display: flex;
        width: 100%;
        align-items: stretch;
    }

    .product-add-row .tks-qty-btn {
        flex: 1;
        min-height: 48px;
    }

    .product-add-row .tks-qty-input {
        flex: 1.2;
        width: auto;
        min-width: 0;
    }

    .product-add-row .add-to-cart,
    .product-add-row .tks-add-to-cart,
    .product-add-row .btn-outline {
        width: 100%;
    }

    .hero-overlay h2 {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .hero-overlay p {
        font-size: 13px;
    }

    .recommended-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .chip-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .site-logo-mark {
        width: 30px;
        height: 30px;
    }

    .site-logo-name {
        font-size: 16px;
    }

    .site-logo-tld {
        font-size: 11px;
    }

    .logo-text {
        font-size: 10px;
        letter-spacing: 0.06em;
    }

    .footer-grid {
        gap: 24px;
    }

    .footer-col h4 {
        margin-bottom: 10px;
    }
}

/* Homepage mirrored theme content */
body.store-theme-active #homeMain,
body.store-theme-active main {
    overflow-x: hidden;
    max-width: 100%;
}

body.store-theme-active .page-width,
body.store-theme-active .container,
body.store-theme-active .content-indent {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
}

body.store-theme-active .slideshow__image.tks-bg-loaded,
body.store-theme-active .slideshow__image.lazyloaded,
body.store-theme-active .slideshow-wrapper .slideshow__slide {
    min-height: clamp(220px, 56vw, 420px) !important;
}

body.store-theme-active .section-slideshow .tks-hero-slide,
body.store-theme-active .section-slideshow .section-slideshow-slide-background {
    min-height: clamp(220px, 56vw, 420px) !important;
}

body.store-theme-active .marquee-wrap,
body.store-theme-active .marquee-track,
body.store-theme-active .top-header-wrapper,
body.store-theme-active .slideshowOuter {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 767px) {
    body.store-theme-active .grid__item.one-quarter,
    body.store-theme-active .medium-up--one-quarter,
    body.store-theme-active .grid__item.one-third,
    body.store-theme-active .medium-up--one-third {
        width: 50% !important;
        float: none !important;
    }

    body.store-theme-active .grid__item.one-half,
    body.store-theme-active .medium-up--one-half {
        width: 100% !important;
        float: none !important;
    }

    body.store-theme-active .grid-products.carousel.tks-carousel-fallback > .grid__item {
        width: 50% !important;
    }

    body.store-theme-active .footer-block,
    body.store-theme-active .footer-top {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    body.store-theme-active .footer-block__item,
    body.store-theme-active .medium-up--one-fifth {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.store-theme-active .site-footer .page-width {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    body.store-theme-active table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 首页分类卡片：统一图片比例 + 标签栏高度 */
    body.store-theme-active .collection-box .collection-grid > .grid__item,
    body.store-theme-active .collection-box .collection-grid.carousel.tks-carousel-fallback > .grid__item {
        width: 50% !important;
        float: none !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    body.store-theme-active .collection-box .collection-grid-item .imgWrap {
        flex: 0 0 auto;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        position: relative;
        overflow: hidden;
        background: #f4f4f4;
    }

    body.store-theme-active .collection-box .collection-grid-item .img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    body.store-theme-active .collection-box .collection-grid-item .details {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        padding: 6px 8px !important;
        box-sizing: border-box;
        margin-top: 0;
        width: 100%;
    }

    body.store-theme-active .collection-box .collection-grid-item__title {
        font-size: 11px !important;
        line-height: 1.3;
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
        hyphens: auto;
    }
}

@media (max-width: 480px) {
    body.store-theme-active .grid__item.one-quarter,
    body.store-theme-active .medium-up--one-quarter,
    body.store-theme-active .grid-products.carousel.tks-carousel-fallback > .grid__item {
        width: 100% !important;
    }
}