/* Responsive product images — guest storefront
   Load this file LAST so padding/object-fit are not overridden */

/* ===== Product cards (home, shop, search) ===== */
.product-image-wrapper {
    aspect-ratio: 3 / 4 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.product-image-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 1;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
}

.product-image-link:focus-visible {
    outline: 2px solid var(--clr-primary, #ef4444);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.product-image,
.product-image.main-img,
.product-image-wrapper img,
.product-image-link img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

.product-details .product-cart-form,
.product-details > a.buy-now-btn {
    margin-top: 0.75rem;
}

.product-details .color-selector + .product-cart-form,
.product-details .color-selector + a.buy-now-btn {
    margin-top: 0;
}

.product-details > a.buy-now-btn {
    text-decoration: none;
}

.product-details .price-wrapper {
    margin-bottom: 0;
}

.discount-percent,
.watch-discount-percent {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    line-height: 1.2;
    white-space: nowrap;
}

.promotion-price-wrapper .discount-percent {
    font-size: 0.75rem;
}

.watch-price-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.watch-product-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.product-details .color-selector {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

/* ===== Promotion cards (home) ===== */
.promotion-card {
    padding: 0 !important;
    overflow: hidden;
}

.promotion-card .promotion-info {
    padding: 1rem 1.25rem 1.25rem;
}

.promotion-image {
    aspect-ratio: 3 / 4 !important;
    display: block !important;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
    width: 100%;
}

.promotion-image-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none;
    color: inherit;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
}

.promotion-image-link:focus-visible {
    outline: 2px solid var(--clr-primary, #ef4444);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.promotion-img,
.promotion-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Touch devices: giữ ảnh sạch, không overlay trắng khi nhấn giữ */
@media (hover: none), (pointer: coarse) {
    .product-box:hover .product-image {
        transform: none;
    }

    .watch-product-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .product-image,
    .product-image-link img,
    .watch-product-img,
    .watch-main-img,
    .color-dot,
    a img {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

@media (hover: none) {
    .product-box:hover .product-image {
        transform: none;
    }
}

.watch-product-overlay {
    pointer-events: none;
    z-index: 2;
}

.watch-product-overlay .watch-product-actions,
.watch-product-overlay .watch-action-btn,
.watch-product-overlay .watch-action-form {
    pointer-events: auto;
}

.watch-product-img-link {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
}

/* ===== Product detail gallery ===== */
.watch-main-image {
    aspect-ratio: 3 / 4 !important;
    min-height: 0;
    max-height: none;
    padding: 0 !important;
    margin-bottom: 1rem;
    overflow: hidden;
    line-height: 0;
    display: block !important;
}

.watch-main-img,
.watch-main-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.watch-thumbnails {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
}

.watch-thumbnails::-webkit-scrollbar {
    height: 4px;
}

.watch-thumbnails::-webkit-scrollbar-thumb {
    background: var(--clr-border, #d1d5db);
    border-radius: 999px;
}

.watch-thumb {
    flex: 0 0 auto;
    width: clamp(52px, 16vw, 72px);
    min-width: clamp(52px, 16vw, 72px);
    padding: 0 !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden;
    line-height: 0;
}

.watch-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ===== Similar products on detail page ===== */
.watch-product-img-wrapper {
    aspect-ratio: 3 / 4 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    line-height: 0;
    display: block !important;
}

.watch-product-img,
.watch-product-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Cart thumbnails */
.item-img-container {
    padding: 0 !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden;
    line-height: 0;
}

.item-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    mix-blend-mode: normal !important;
}

@media (max-width: 767px) {
    .watch-detail-section {
        padding: 1.25rem 0;
    }

    .watch-detail-grid {
        gap: 1.25rem;
    }

    .watch-images-col {
        position: relative;
        top: 0;
    }
}

@media (max-width: 480px) {
    .watch-main-image {
        border-radius: 0.375rem;
    }

    .watch-thumb {
        width: 52px;
        min-width: 52px;
    }
}

@media (min-width: 1024px) {
    .watch-main-image {
        max-height: 640px;
    }

    .watch-thumbnails {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .watch-thumb {
        width: calc(20% - 0.4rem);
        min-width: 0;
        max-width: 88px;
    }
}