/* ============================================================
   Discount Tiles — Premium Mobile Product Page V2
   Mobile only. Desktop product layout is not affected.
============================================================ */

@media (max-width: 768px) {
    :root {
        --pm-page: #f5f5f7;
        --pm-card: #ffffff;
        --pm-text: #111111;
        --pm-muted: #6e6e73;
        --pm-line: rgba(17,17,17,.09);
        --pm-radius: 22px;
        --pm-gap: 14px;
        --pm-edge: 12px;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: var(--pm-page) !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 var(--pm-edge) 30px !important;
        box-sizing: border-box !important;
        background: var(--pm-page) !important;
    }

    .breadcrumb {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 2px 10px !important;
        box-sizing: border-box !important;
    }

    .product-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: var(--pm-gap) !important;
        box-sizing: border-box !important;
    }

    .left-column {
        display: contents !important;
    }

    .gallery-card { order: 1 !important; }
    .info-card { order: 2 !important; }
    .product-tabs { order: 3 !important; }

    .gallery-card,
    .info-card,
    .product-tabs,
    .related-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        background: var(--pm-card) !important;
        border: 1px solid var(--pm-line) !important;
        border-radius: var(--pm-radius) !important;
        box-shadow: 0 5px 20px rgba(0,0,0,.045) !important;
        overflow: hidden !important;
    }

    /* Full-width gallery */
    .gallery-card {
        padding: 0 !important;
    }

    .main-image-wrap {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f1f1f1 !important;
        overflow: hidden !important;
    }

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

    .zoom-label {
        display: none !important;
    }

    .thumb-row {
        display: flex !important;
        width: 100% !important;
        gap: 9px !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        background: #fff !important;
        border-top: 1px solid var(--pm-line) !important;
        scrollbar-width: none;
    }

    .thumb-row::-webkit-scrollbar {
        display: none;
    }

    .thumb-row img {
        flex: 0 0 58px !important;
        width: 58px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 2px !important;
        box-sizing: border-box !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        border: 1px solid #d8d8d8 !important;
        background: #f5f5f5 !important;
    }

    .thumb-row img.active-thumb {
        border: 2px solid #111 !important;
    }

    /* Product information card */
    .info-card {
        padding: 20px 18px !important;
    }

    .info-card h1 {
        margin: 10px 0 10px !important;
        font-size: clamp(25px, 7vw, 34px) !important;
        line-height: 1.03 !important;
        letter-spacing: -.55px !important;
    }

    .delivery-box,
    .why-box,
    .tile-selector-box,
    .calculator,
    .qty-card {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 18px !important;
    }

    /* One clean specification card */
    .product-tabs {
        padding: 0 !important;
    }

    .product-tabs .tab-buttons,
    #descTab {
        display: none !important;
    }

    #specTab {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #specTab::before {
        content: "Specifications";
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 19px 18px 15px;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -.35px;
        color: var(--pm-text);
        border-bottom: 1px solid var(--pm-line);
    }

    .product-spec-list {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 18px 8px !important;
        box-sizing: border-box !important;
    }

    .product-spec-list li {
        display: grid !important;
        grid-template-columns: minmax(112px, 42%) minmax(0, 58%) !important;
        align-items: center !important;
        column-gap: 14px !important;
        width: 100% !important;
        min-height: 51px !important;
        margin: 0 !important;
        padding: 12px 0 !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid var(--pm-line) !important;
        color: var(--pm-text) !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .product-spec-list li:last-child {
        border-bottom: 0 !important;
    }

    .product-spec-list strong {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: var(--pm-muted) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
        text-transform: none !important;
        overflow-wrap: anywhere !important;
    }

    .product-spec-list span {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: var(--pm-text) !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        font-weight: 650 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    .spec-table {
        display: none !important;
    }

    .related-card {
        margin-top: var(--pm-gap) !important;
    }
}

@media (max-width: 380px) {
    .container {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .product-spec-list li {
        grid-template-columns: 105px minmax(0, 1fr) !important;
        column-gap: 10px !important;
    }
}