/* ==========================================================
   DDALSHOP SINGLE PRODUCT REDESIGN V2
   Scope : WooCommerce single product page only
   Fokus : 2,3,4,5,10
   ========================================================== */

/* ==========================================================
   0. WRAPPER GLOBAL
   ========================================================== */
body.single-product {
    background: #f7f5f2;
    color: #2f3742;
}

body.single-product #main,
body.single-product .page-wrapper,
body.single-product .shop-page-title,
body.single-product .shop-container {
    background: transparent;
}

body.single-product .product-main {
    padding: 20px 0 0;
}

/* Lebarkan area desktop agar atas lebih mirip mockup */
@media (min-width: 850px) {
    body.single-product .shop-container,
    body.single-product .container-width,
    body.single-product .row.row-main {
        width: min(1240px, calc(100% - 36px));
        max-width: 1240px;
        margin-right: auto;
        margin-left: auto;
    }

    body.single-product .product-main .row.content-row {
        display: flex;
        align-items: flex-start;
        margin-right: -14px;
        margin-left: -14px;
    }

    body.single-product .product-main .product-gallery,
    body.single-product .product-main .product-thumbnails,
    body.single-product .product-main .woocommerce-product-gallery {
        width: 58%;
        max-width: 58%;
        flex: 0 0 58%;
        padding-right: 14px;
        padding-left: 14px;
        box-sizing: border-box;
    }

    body.single-product .product-main .product-info.summary,
    body.single-product .product-main .product-info.entry-summary,
    body.single-product .product-main .summary.entry-summary {
        width: 42%;
        max-width: 42%;
        flex: 0 0 42%;
        padding-right: 14px;
        padding-left: 14px;
        box-sizing: border-box;
    }
}

/* ==========================================================
   1. PANEL INFORMASI PRODUK
   ========================================================== */
body.single-product .product-main .product-info.summary,
body.single-product .product-main .product-info.entry-summary,
body.single-product .product-main .summary.entry-summary {
    margin: 0;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Jika ada card lama dari CSS lama, netralkan */
body.single-product .product-main .product-info.summary::before,
body.single-product .product-main .product-info.entry-summary::before,
body.single-product .product-main .summary.entry-summary::before {
    display: none;
    content: none;
}

/* ==========================================================
   2. BREADCRUMB + JUDUL
   ========================================================== */
body.single-product .product-main .product-info .breadcrumbs,
body.single-product .product-main .product-info .woocommerce-breadcrumb,
body.single-product .product-main .summary .breadcrumbs,
body.single-product .product-main .summary .woocommerce-breadcrumb {
    margin: 0 0 10px;
    color: #8a9098;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
}

body.single-product .product-main .product-info .breadcrumbs a,
body.single-product .product-main .product-info .woocommerce-breadcrumb a,
body.single-product .product-main .summary .breadcrumbs a,
body.single-product .product-main .summary .woocommerce-breadcrumb a {
    color: #7b8590;
}

body.single-product .product-main .product-info .breadcrumbs a:hover,
body.single-product .product-main .product-info .woocommerce-breadcrumb a:hover,
body.single-product .product-main .summary .breadcrumbs a:hover,
body.single-product .product-main .summary .woocommerce-breadcrumb a:hover {
    color: #3a6ea5;
}

body.single-product .product-main .product-info .product-title,
body.single-product .product-main .product-info .product_title,
body.single-product .product-main .summary .product-title,
body.single-product .product-main .summary .product_title,
body.single-product .product-main h1.product-title,
body.single-product .product-main h1.product_title {
    margin: 0 0 14px;
    color: #1f2b38;
    font-size: clamp(27px, 2.2vw, 38px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.028em;
}

body.single-product .product-main .product-info .is-divider,
body.single-product .product-main .summary .is-divider {
    display: none;
}

/* ==========================================================
   3. RATING
   ========================================================== */
body.single-product .product-main .product-info .woocommerce-product-rating,
body.single-product .product-main .summary .woocommerce-product-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 16px;
}

body.single-product .product-main .product-info .star-rating,
body.single-product .product-main .summary .star-rating {
    margin: 0;
    color: #f2a900;
    font-size: 13px;
}

body.single-product .product-main .product-info .woocommerce-review-link,
body.single-product .product-main .summary .woocommerce-review-link {
    color: #727c86;
    font-size: 13px;
}

/* ==========================================================
   4. HARGA
   ========================================================== */
body.single-product .product-main .product-info .price-wrapper,
body.single-product .product-main .summary .price-wrapper {
    margin: 0 0 12px;
}

body.single-product .product-main .product-info .price,
body.single-product .product-main .summary .price {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    margin: 0;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

body.single-product .product-main .product-info .price del,
body.single-product .product-main .summary .price del {
    color: #9aa2ab;
    font-size: 16px;
    font-weight: 400;
    opacity: 1;
}

body.single-product .product-main .product-info .price ins,
body.single-product .product-main .summary .price ins,
body.single-product .product-main .product-info .price > .amount,
body.single-product .product-main .product-info .price > .woocommerce-Price-amount,
body.single-product .product-main .summary .price > .amount,
body.single-product .product-main .summary .price > .woocommerce-Price-amount {
    color: #172434;
    font-size: clamp(29px, 2.2vw, 40px);
    font-weight: 700;
    text-decoration: none;
}

body.single-product .product-main .price .woocommerce-Price-currencySymbol {
    font-size: 0.88em;
}

/* ==========================================================
   5. STOK + SHORT DESCRIPTION
   ========================================================== */
body.single-product .product-main .product-info p.stock,
body.single-product .product-main .summary p.stock {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf8ef;
    color: #318047;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

body.single-product .product-main .product-info .woocommerce-product-details__short-description,
body.single-product .product-main .summary .woocommerce-product-details__short-description,
body.single-product .product-main .product-info .short-description,
body.single-product .product-main .summary .short-description {
    margin: 0 0 16px;
    color: #606974;
    font-size: 14px;
    line-height: 1.7;
}

/* ==========================================================
   6. KOTAK OPSI
   ========================================================== */
body.single-product .product-main .product-info form.variations_form,
body.single-product .product-main .summary form.variations_form {
    width: 100%;
    margin: 0;
    padding: 16px;
    border: 1px solid #e8e1d8;
    border-radius: 14px;
    background: #fffdfa;
    box-sizing: border-box;
}

body.single-product .product-main .product-info table.variations,
body.single-product .product-main .summary table.variations {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
}

body.single-product .product-main .product-info table.variations tbody,
body.single-product .product-main .product-info table.variations tr,
body.single-product .product-main .summary table.variations tbody,
body.single-product .product-main .summary table.variations tr {
    display: block;
    width: 100%;
}

body.single-product .product-main .product-info table.variations tr + tr,
body.single-product .product-main .summary table.variations tr + tr {
    margin-top: 13px;
}

body.single-product .product-main .product-info table.variations th,
body.single-product .product-main .product-info table.variations td,
body.single-product .product-main .summary table.variations th,
body.single-product .product-main .summary table.variations td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
}

body.single-product .product-main .product-info table.variations .label,
body.single-product .product-main .summary table.variations .label {
    margin: 0 0 8px;
}

body.single-product .product-main .product-info table.variations .label label,
body.single-product .product-main .summary table.variations .label label {
    display: block;
    margin: 0;
    color: #2f3945;
    font-size: 13px;
    font-weight: 700;
}

body.single-product .product-main .product-info table.variations select,
body.single-product .product-main .summary table.variations select {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 42px 0 14px;
    border: 1px solid #dce2e8;
    border-radius: 10px;
    background: #ffffff;
    color: #46515e;
    font-size: 13px;
    line-height: 46px;
    box-shadow: none;
}

body.single-product .product-main .product-info table.variations select:focus,
body.single-product .product-main .summary table.variations select:focus {
    border-color: #3a6ea5;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(58,110,165,0.10);
}

body.single-product .product-main .product-info .reset_variations,
body.single-product .product-main .summary .reset_variations {
    display: inline-flex;
    margin: 8px 0 0;
    color: #67717c;
    font-size: 12px;
    font-weight: 600;
}

body.single-product .product-main .product-info .single_variation,
body.single-product .product-main .summary .single_variation {
    margin: 12px 0 0;
}

/* ==========================================================
   7. QUANTITY + CTA
   ========================================================== */
body.single-product .product-main .product-info .woocommerce-variation-add-to-cart,
body.single-product .product-main .summary .woocommerce-variation-add-to-cart,
body.single-product .product-main .product-info form.cart:not(.variations_form),
body.single-product .product-main .summary form.cart:not(.variations_form) {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    width: 100%;
    margin: 14px 0 0;
}

body.single-product .product-main .product-info .quantity,
body.single-product .product-main .summary .quantity {
    margin: 0;
}

body.single-product .product-main .product-info .quantity.buttons_added,
body.single-product .product-main .summary .quantity.buttons_added {
    display: inline-grid;
    grid-template-columns: 34px 44px 34px;
    width: 112px;
    height: 48px;
    overflow: hidden;
    border: 1px solid #dce2e8;
    border-radius: 10px;
    background: #ffffff;
}

body.single-product .product-main .product-info .quantity.buttons_added .minus,
body.single-product .product-main .product-info .quantity.buttons_added .plus,
body.single-product .product-main .summary .quantity.buttons_added .minus,
body.single-product .product-main .summary .quantity.buttons_added .plus {
    width: 34px;
    min-width: 34px;
    height: 46px;
    padding: 0;
    border: 0;
    background: #f7f9fb;
    color: #52606e;
    font-size: 16px;
    line-height: 46px;
    box-shadow: none;
}

body.single-product .product-main .product-info .quantity.buttons_added .minus,
body.single-product .product-main .summary .quantity.buttons_added .minus {
    border-right: 1px solid #e6ebef;
}

body.single-product .product-main .product-info .quantity.buttons_added .plus,
body.single-product .product-main .summary .quantity.buttons_added .plus {
    border-left: 1px solid #e6ebef;
}

body.single-product .product-main .product-info .quantity.buttons_added .qty,
body.single-product .product-main .summary .quantity.buttons_added .qty {
    width: 44px;
    min-width: 44px;
    height: 46px;
    padding: 0;
    border: 0;
    background: #ffffff;
    color: #243140;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    box-shadow: none;
}

body.single-product .product-main .product-info .single_add_to_cart_button,
body.single-product .product-main .product-info button.single_add_to_cart_button.button,
body.single-product .product-main .product-info button.single_add_to_cart_button.button.alt,
body.single-product .product-main .summary .single_add_to_cart_button,
body.single-product .product-main .summary button.single_add_to_cart_button.button,
body.single-product .product-main .summary button.single_add_to_cart_button.button.alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #e88663;
    border-radius: 10px;
    background: #e88663;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
}

body.single-product .product-main .product-info .single_add_to_cart_button:hover,
body.single-product .product-main .product-info button.single_add_to_cart_button.button:hover,
body.single-product .product-main .product-info button.single_add_to_cart_button.button.alt:hover,
body.single-product .product-main .summary .single_add_to_cart_button:hover,
body.single-product .product-main .summary button.single_add_to_cart_button.button:hover,
body.single-product .product-main .summary button.single_add_to_cart_button.button.alt:hover {
    border-color: #db7651;
    background: #db7651;
    color: #ffffff;
}

/* ==========================================================
   8. META
   ========================================================== */
body.single-product .product-main .product-info .product_meta,
body.single-product .product-main .summary .product_meta {
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px dashed #e2e7eb;
    color: #7b858f;
    font-size: 11px;
    line-height: 1.65;
}

body.single-product .product-main .product-info .product_meta > span,
body.single-product .product-main .summary .product_meta > span {
    display: block;
    margin-bottom: 4px;
}

body.single-product .product-main .product-info .product_meta a,
body.single-product .product-main .summary .product_meta a {
    color: #3a6ea5;
}

body.single-product .social-icons.share-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

body.single-product .social-icons.share-icons .icon {
    width: 34px;
    height: 34px;
    border: 1px solid #dfe4e9;
    border-radius: 50%;
    background: #ffffff;
    color: #55616d;
}

/* ==========================================================
   9. RELATED PRODUCTS
   ========================================================== */
body.single-product .product-footer {
    padding-top: 8px;
    padding-bottom: 64px;
}

body.single-product .related.related-products-wrapper,
body.single-product .related.products {
    margin-top: 34px;
    margin-bottom: 0;
    padding: 22px;
    border: 1px solid #e8e2da;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 9px 26px rgba(38, 50, 65, 0.045);
}

body.single-product .related .product-section-title,
body.single-product .related > h2 {
    margin: 0 0 18px;
    color: #1f2b38;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

body.single-product .related .product-section-title::after,
body.single-product .related .product-section-title b {
    display: none;
}

body.single-product .related .products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    margin: 0;
}

body.single-product .related .products > .product,
body.single-product .related .products > .product-small {
    display: flex;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.single-product .related .products > .product > .col-inner,
body.single-product .related .products > .product-small > .col-inner {
    width: 100%;
}

body.single-product .related .product-small .box,
body.single-product .related .products > .product .box {
    display: flex;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #e7e2dc;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(39, 52, 67, 0.04);
}

body.single-product .related .box-image {
    overflow: hidden;
    border-bottom: 1px solid #eee9e3;
    background: #f7f7f7;
    aspect-ratio: 1 / 1;
}

body.single-product .related .box-image img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

body.single-product .related .box-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 12px 12px 13px;
    text-align: left;
}

body.single-product .related .product-title,
body.single-product .related .name.product-title,
body.single-product .related .woocommerce-loop-product__title {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 0 0 8px;
    overflow: hidden;
    color: #2e3945;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

body.single-product .related .product-title a,
body.single-product .related .name.product-title a,
body.single-product .related .woocommerce-loop-product__title a {
    display: -webkit-box;
    overflow: hidden;
    color: #2e3945;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.single-product .related .price-wrapper {
    margin-top: auto;
}

body.single-product .related .price {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 5px;
    align-items: baseline;
    margin: 0;
    color: #172434;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

body.single-product .related .price del {
    color: #9aa2ab;
    font-size: 10px;
    font-weight: 400;
    opacity: 1;
}

body.single-product .related .price ins,
body.single-product .related .price > .amount {
    color: #172434;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

/* ==========================================================
   10. TABLET
   ========================================================== */
@media (max-width: 849px) {
    body.single-product .product-main {
        padding-top: 14px;
    }

    body.single-product .product-main .product-info.summary,
    body.single-product .product-main .product-info.entry-summary,
    body.single-product .product-main .summary.entry-summary {
        padding-top: 10px;
    }

    body.single-product .product-main .product-info .product-title,
    body.single-product .product-main .product-info .product_title,
    body.single-product .product-main .summary .product-title,
    body.single-product .product-main .summary .product_title {
        font-size: 29px;
    }

    body.single-product .product-main .product-info .price ins,
    body.single-product .product-main .summary .price ins,
    body.single-product .product-main .product-info .price > .amount,
    body.single-product .product-main .summary .price > .amount,
    body.single-product .product-main .product-info .price > .woocommerce-Price-amount,
    body.single-product .product-main .summary .price > .woocommerce-Price-amount {
        font-size: 30px;
    }

    body.single-product .product-footer {
        padding-bottom: 46px;
    }

    body.single-product .related.related-products-wrapper,
    body.single-product .related.products {
        padding: 18px;
        border-radius: 15px;
    }

    body.single-product .related .products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 13px;
    }
}

/* ==========================================================
   11. MOBILE
   ========================================================== */
@media (max-width: 549px) {
    body.single-product .shop-container,
    body.single-product .container-width,
    body.single-product .row.row-main {
        width: calc(100% - 24px);
        max-width: none;
    }

    body.single-product .product-main .product-info.summary,
    body.single-product .product-main .product-info.entry-summary,
    body.single-product .product-main .summary.entry-summary {
        width: 100%;
        max-width: 100%;
        padding-top: 18px;
    }

    body.single-product .product-main .product-info .product-title,
    body.single-product .product-main .product-info .product_title,
    body.single-product .product-main .summary .product-title,
    body.single-product .product-main .summary .product_title {
        margin-bottom: 10px;
        font-size: 24px;
        line-height: 1.22;
    }

    body.single-product .product-main .product-info .price del,
    body.single-product .product-main .summary .price del {
        font-size: 14px;
    }

    body.single-product .product-main .product-info .price ins,
    body.single-product .product-main .summary .price ins,
    body.single-product .product-main .product-info .price > .amount,
    body.single-product .product-main .summary .price > .amount,
    body.single-product .product-main .product-info .price > .woocommerce-Price-amount,
    body.single-product .product-main .summary .price > .woocommerce-Price-amount {
        font-size: 26px;
    }

    body.single-product .product-main .product-info form.variations_form,
    body.single-product .product-main .summary form.variations_form {
        padding: 13px;
        border-radius: 10px;
    }

    body.single-product .product-main .product-info .woocommerce-variation-add-to-cart,
    body.single-product .product-main .summary .woocommerce-variation-add-to-cart,
    body.single-product .product-main .product-info form.cart:not(.variations_form),
    body.single-product .product-main .summary form.cart:not(.variations_form) {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.single-product .product-main .product-info .single_add_to_cart_button,
    body.single-product .product-main .product-info button.single_add_to_cart_button.button,
    body.single-product .product-main .product-info button.single_add_to_cart_button.button.alt,
    body.single-product .product-main .summary .single_add_to_cart_button,
    body.single-product .product-main .summary button.single_add_to_cart_button.button,
    body.single-product .product-main .summary button.single_add_to_cart_button.button.alt {
        width: 100%;
        min-height: 46px;
    }

    body.single-product .product-footer {
        padding-bottom: 30px;
    }

    body.single-product .related.related-products-wrapper,
    body.single-product .related.products {
        margin-top: 26px;
        padding: 14px;
        border-radius: 13px;
    }

    body.single-product .related .product-section-title,
    body.single-product .related > h2 {
        margin-bottom: 14px;
        font-size: 19px;
    }

    body.single-product .related .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.single-product .related .box-text {
        padding: 10px;
    }

    body.single-product .related .product-title,
    body.single-product .related .name.product-title,
    body.single-product .related .woocommerce-loop-product__title {
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        font-size: 10.5px;
        line-height: 16px;
    }
}