.tk-carousel { position: relative; margin-bottom: 20px; aspect-ratio: 8 / 3; overflow: hidden; border-radius: 8px; background: var(--tk-glass-raised); }
.tk-slide, .tk-slide a { display: block; width: 100%; height: 100%; }
.tk-slide[hidden], .tk-product-media[hidden] { display: none !important; }
.tk-slide img { width: 100%; height: 100%; object-fit: cover; }
.tk-slide-title { position: absolute; bottom: 34px; left: 24px; max-width: calc(100% - 48px); color: white; background: rgba(0,0,0,.55); padding: 8px 12px; font-size: 20px; overflow-wrap: anywhere; }
.tk-slide-prev, .tk-slide-next { position: absolute; top: calc(50% - 20px); width: 40px; height: 40px; border: 0; border-radius: 50%; color: white; background: rgba(0,0,0,.45); font-size: 24px; }
.tk-slide-prev { left: 12px; } .tk-slide-next { right: 12px; }
.tk-slide-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.tk-slide-dots button { padding: 0; width: 12px; height: 12px; border-radius: 50%; border: 1px solid white; background: rgba(0,0,0,.4); }
.tk-slide-dots button[aria-pressed=true] { background: white; }
.tk-product-open .tk-mobile-tabbar { visibility: hidden; pointer-events: none; }
.tk-product-open .tk-orb { animation-play-state: paused !important; }
.layui-layer.tk-product-layer { position: fixed !important; height: var(--tk-product-height, 88dvh) !important; display: flex; flex-direction: column; overflow: hidden; }
.tk-product-layer .layui-layer-title { flex: 0 0 52px; height: 52px; line-height: 52px; padding-right: 60px; padding-left: 24px; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-product-layer .layui-layer-setwin { top: 6px; right: 10px; }
.tk-product-layer .layui-layer-setwin .layui-layer-close { position: relative; display: block; width: 40px; height: 40px; margin: 0; border-radius: 50%; background: var(--tk-glass-control) !important; color: var(--tk-text); border: 1px solid var(--tk-hairline); opacity: 1; }
.tk-product-layer .layui-layer-close::before, .tk-product-layer .layui-layer-close::after { content: ''; position: absolute; left: 10px; top: 19px; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.tk-product-layer .layui-layer-close::after { transform: rotate(-45deg); }
.tk-product-layer .layui-layer-close:hover { background: var(--tk-glass-hover) !important; }
.tk-product-layer .layui-layer-close:focus-visible { outline: 3px solid var(--tk-accent); outline-offset: 2px; }
.layui-layer.tk-product-layer .layui-layer-content { flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none !important; overflow: auto; overscroll-behavior: contain; border-radius: 0 !important; }
.tk-product-layer .open-commodity { display: block !important; padding: 28px; }
.tk-product-purchase { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px 32px; }
/* The stretching media column bounds the sticky image to the purchase rows only. */
.tk-product-media { grid-column: 1; grid-row: 1 / 3; align-self: stretch; position: relative; min-width: 0; }
.tk-product-photo { position: sticky; top: 0; display: block; width: 100%; max-height: 520px; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: white; }
.tk-product-layer .commodity-di, .tk-product-layer .pay-content { grid-column: 2; min-width: 0; margin: 0; }
.tk-product-layer .commodity_name { text-align: left; font-size: 24px; line-height: 1.45; overflow-wrap: anywhere; }
.tk-product-layer .share_url { text-align: left; }
.tk-product-layer .commodity-di .general { font-size: 15px; margin-bottom: 16px; }
.tk-product-layer .commodity-di .price { font-size: 32px !important; }
.tk-product-layer .acg-input { font-size: 16px; min-height: 42px; border-radius: 8px !important; }
.tk-product-layer .contact { width: 100%; }
.tk-product-layer .pay_list { display: flex; flex-wrap: wrap; gap: 10px; }
.tk-product-layer .pay_list > * { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.tk-product-details { min-width: 0; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--tk-hairline); }
.tk-product-details h2 { font-size: 18px; margin-bottom: 18px; }
.tk-product-layer .description, .tk-product-layer .description p { font-size: 15px !important; line-height: 1.8; overflow-wrap: anywhere; }
.tk-product-layer .description img { max-width: 100%; height: auto; }
.tk-product-layer .description table { display: block; max-width: 100%; overflow: auto; }
.tk-product-layer.tk-no-product-image .open-commodity { max-width: 850px; margin: auto; }
.tk-product-layer.tk-no-product-image .tk-product-purchase { grid-template-columns: minmax(0, 1fr); }
.tk-product-layer.tk-no-product-image .commodity-di, .tk-product-layer.tk-no-product-image .pay-content { grid-column: 1; }
.tk-product-layer * { letter-spacing: 0; }
@media (min-width: 900px) {
    /* Keep the gap outside the scrollport, including when the photo scrolls out. */
    .layui-layer.tk-product-layer .layui-layer-content { margin-top: 28px; }
    .tk-product-layer .open-commodity { padding-top: 0; }
    .layui-layer.tk-product-layer {
        background: #fcfdff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        animation: none !important;
    }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
    .layui-layer.tk-product-layer { background: #20232c !important; }
}
@media (max-width: 899px) {
    .layui-layer.tk-product-layer { border-radius: 0 !important; margin: 0 !important; }
    .tk-product-layer .open-commodity { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
    .tk-product-purchase { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .tk-product-media { position: static; grid-row: auto; grid-column: 1; }
    .tk-product-photo { position: static; max-height: 280px; aspect-ratio: 4 / 3; }
    .tk-product-layer .commodity-di, .tk-product-layer .pay-content { grid-column: 1; }
    .tk-product-layer .commodity_name { font-size: 20px; }
    .tk-product-layer .layui-layer-title { padding-left: 16px; }
    .tk-carousel { aspect-ratio: 16 / 7; }
    .tk-slide-title { font-size: 16px; left: 16px; bottom: 30px; padding: 6px 8px; }
}