/* ========================================
   SINGLE PRODUCT PAGE UI
   Loads only on WooCommerce single product pages
   File: assets/css/single-product.css
   ======================================== */

body.single-product .site-content {
    background: #F5F6F8;
}

/* GeneratePress puts a duplicate featured image above the WooCommerce gallery on
   single products — hide it so the image is shown only once. */
body.single-product .featured-image.page-header-image-single {
    display: none;
}

/* ---- CONTAINER / LAYOUT ---- */
body.single-product #main {
    padding: 0;
}

body.single-product .entry-content:not(:first-child),
body.single-product .entry-summary:not(:first-child),
body.single-product .page-content:not(:first-child) {
    margin-top: 0;
}

body.single-product .product {
    gap: 2.5rem;
}

@media (max-width: 767.98px) {
    body.single-product .product {
        gap: 1.5rem;
    }
}

/* ---- PRODUCT IMAGES ---- */
body.single-product div.images {
    margin: 0;
}

@media (min-width: 992px) {
    body.single-product div.images {
        width: 44% !important;
    }
}

@media (max-width: 991.98px) {
    body.single-product div.images {
        width: 100% !important;
        float: none !important;
    }
}

body.single-product div.images .woocommerce-product-gallery__wrapper {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    padding: 0.5rem;
    overflow: hidden;
    /* main image on top, extra gallery images flow in a horizontal row below */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    /* WooCommerce flexslider sets an inline width to the summed slide widths,
       which blows the main image up and crops it. Keep the wrapper inside the
       gallery viewport so images render at their natural proportion. */
    width: 100% !important;
    height: auto;
}

body.single-product div.images img {
    border-radius: 0.75rem;
}

/* flexslider sets an inline height on the viewport that clips taller images */
body.single-product div.images .flex-viewport {
    height: auto !important;
}

/* main image takes the full first row */
body.single-product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
    order: 1;
    flex: 0 0 100%;
    width: 100% !important;
    margin: 0;
    min-width: 0;
}

body.single-product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child img {
    width: 100% !important;
    height: auto;
    max-width: 100%;
}

/* hide WooCommerce flexslider's duplicate thumbnail nav — the theme already
   renders extra images below the main image, so the second gallery of
   thumbnails underneath is redundant. */
body.single-product div.images ol.flex-control-thumbs {
    display: none;
}

/* extra gallery images become a horizontal row of bordered thumbnails */
body.single-product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child),
body.single-product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__video:not(:first-child) {
    order: 2;
    flex: 0 0 84px;
    width: 84px !important;
    margin: 0;
}

body.single-product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) a,
body.single-product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) img {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
    border: 2px solid #E2E8F0;
    border-radius: 0.5rem;
}

body.single-product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) img.is-active,
body.single-product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child).wpgs-nav-active img {
    border-color: #16B95B;
}

/* sale badge */
body.single-product .product .onsale {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #16B95B;
    color: #fff;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.45rem 0.85rem;
    margin: 0;
    min-width: 2rem;
    min-height: 2rem;
    text-align: center;
    box-shadow: 0 4px 10px rgba(22, 185, 91, 0.35);
}

/* condition + wattage badges over gallery image (right side stack) */
body.single-product .woocommerce-product-gallery {
    position: relative;
}

body.single-product .paltech-single-badges {
    position: absolute;
    top: 14px;
    right: 60px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

body.single-product .paltech-single-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    min-height: 2rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
}

body.single-product .paltech-wattage-badge.bg-brand-dark {
    background: #0F172A;
}

/* ---- PRODUCT SUMMARY ---- */
@media (min-width: 992px) {
    body.single-product .summary {
        width: 52% !important;
    }
}

@media (max-width: 991.98px) {
    body.single-product .summary {
        width: 100% !important;
        float: none !important;
    }
}

body.single-product .summary {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    padding: 1.75rem;
    align-self: start;
}

@media (max-width: 767.98px) {
    body.single-product .summary {
        padding: 1.25rem;
    }
}

body.single-product .summary .product_title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

/* breadcrumb already styled in style.css (woocommerce-breadcrumb) */
body.single-product .woocommerce-breadcrumb {
    margin-bottom: 1rem;
}

/* price */
body.single-product .summary .price {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body.single-product .summary > .price {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #F1F5F9;
}

body.single-product .summary .price del {
    color: #94A3B8;
    font-weight: 600;
    font-size: 1rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    opacity: 1;
}

body.single-product .summary .price ins {
    text-decoration: none;
}

body.single-product .summary .price ins .woocommerce-Price-amount {
    color: #16B95B;
}

/* short description */
body.single-product .summary .woocommerce-product-details__short-description {
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

body.single-product .summary .woocommerce-product-details__short-description p {
    margin: 0 0 0.75rem;
}

body.single-product .summary .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

/* ---- ADD TO CART FORM ---- */
body.single-product .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

/* quantity */
body.single-product .cart .quantity {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

body.single-product .cart .qty {
    width: 7.75rem;
    height: 3rem;
    padding: 0 2.75rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    font-weight: 700;
    color: #0F172A;
    text-align: center;
    background: #F8FAFC;
    -moz-appearance: textfield;
    appearance: textfield;
}

body.single-product .cart .qty::-webkit-outer-spin-button,
body.single-product .cart .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.single-product .cart .qty:focus {
    outline: 0;
    border-color: #16B95B;
    box-shadow: 0 0 0 3px rgba(22, 185, 91, 0.2);
}

body.single-product .paltech-qty-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #64748B;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    border-radius: 0.625rem;
    transition: color 0.2s ease, background 0.2s ease;
}

body.single-product .paltech-qty-minus {
    left: 0.25rem;
}

body.single-product .paltech-qty-plus {
    right: 0.25rem;
}

body.single-product .paltech-qty-btn:hover,
body.single-product .paltech-qty-btn:focus-visible {
    color: #0F172A;
    background: #F1F5F9;
    outline: none;
}

body.single-product .paltech-qty-btn:active {
    color: #16B95B;
    background: #ECFDF5;
}

/* add to cart button */
body.single-product .cart .single_add_to_cart_button {
    flex: 1;
    min-width: 11rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #16B95B !important;
    color: #fff !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 0.9375rem;
    border: 0 !important;
    border-radius: 0.75rem;
    padding: 0 1.5rem;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.single-product .cart .single_add_to_cart_button:hover {
    background: #0F172A !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.35);
}

body.single-product .cart .single_add_to_cart_button.loading::after {
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}

body.single-product .cart .single_add_to_cart_button.added {
    display: none;
}

/* add-to-cart feedback */
body.single-product .woocommerce-message,
body.single-product .woocommerce-error,
body.single-product .woocommerce-info {
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
}

/* ---- VARIABLES ---- */
body.single-product .variations {
    width: 100%;
    margin: 0 0 1rem;
    border: 0;
}

body.single-product .variations th,
body.single-product .variations td {
    border: 0;
    padding: 0.35rem 0;
}

body.single-product .variations td.label {
    padding-right: 0.75rem;
    vertical-align: middle;
}

body.single-product .variations td.label label {
    font-weight: 800;
    font-size: 0.8125rem;
    color: #0F172A;
    margin: 0;
}

body.single-product .variations select {
    width: 100%;
    padding: 0.55rem 2.25rem 0.55rem 0.75rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.625rem;
    background: #F8FAFC;
    color: #0F172A;
    font-size: 0.875rem;
    font-weight: 600;
}

body.single-product .variations select:focus {
    outline: 0;
    border-color: #16B95B;
    box-shadow: 0 0 0 3px rgba(22, 185, 91, 0.2);
}

body.single-product .variations .reset_variations {
    display: inline-block;
    margin-top: 0.5rem;
    color: #EF4444;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}

body.single-product .single_variation_wrap .woocommerce-variation-price {
    margin: 0.5rem 0;
}

body.single-product .single_variation_wrap .woocommerce-variation-price .price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #16B95B;
}

/* ---- PRODUCT META ---- */
body.single-product .product_meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
    font-size: 0.8125rem;
    color: #64748B;
}

body.single-product .product_meta > span {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

body.single-product .product_meta .posted_in a,
body.single-product .product_meta .tagged_as a {
    color: #0F172A;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.single-product .product_meta .posted_in a:hover,
body.single-product .product_meta .tagged_as a:hover {
    color: #16B95B;
}

/* ---- PRODUCT TABS ---- */
body.single-product .woocommerce-tabs {
    margin-top: 1.5rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    overflow: hidden;
}

body.single-product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0.75rem 1rem 0;
    border: 0;
    border-bottom: 1px solid #E5E7EB;
    background: #F8FAFC;
}

body.single-product .woocommerce-tabs ul.tabs::before {
    border: 0;
}

body.single-product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: 0;
    border-radius: 0.625rem 0.625rem 0 0;
    margin: 0;
    padding: 0;
}

body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after {
    content: none;
    display: none;
}

body.single-product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    color: #64748B;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 0.8125rem;
    border-radius: 0.625rem 0.625rem 0 0;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}

body.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #0F172A;
    background: #F1F5F9;
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
    background: #fff;
    color: #16B95B;
    box-shadow: inset 0 -3px 0 #16B95B;
}

body.single-product .woocommerce-tabs .panel {
    margin: 0 0 2em !important;
    padding: 15px !important;
    color: #475569;
    line-height: 1.75;
}

body.single-product .woocommerce-tabs .panel h2 {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 0.75rem;
}

body.single-product .woocommerce-tabs .panel p {
    margin: 0 0 0.75rem;
}

body.single-product .woocommerce-tabs .panel p:last-child {
    margin-bottom: 0;
}

/* reviews */
body.single-product .woocommerce-Reviews #review_form .comment-respond {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 1.25rem;
}

body.single-product .woocommerce-Reviews .comment-form input[type="text"],
body.single-product .woocommerce-Reviews .comment-form input[type="email"],
body.single-product .woocommerce-Reviews .comment-form textarea,
body.single-product .woocommerce-Reviews .comment-form-rating select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.625rem;
    background: #fff;
    color: #0F172A;
    font-size: 0.875rem;
}

body.single-product .woocommerce-Reviews .comment-form input:focus,
body.single-product .woocommerce-Reviews .comment-form textarea:focus,
body.single-product .woocommerce-Reviews .comment-form select:focus {
    outline: 0;
    border-color: #16B95B;
    box-shadow: 0 0 0 3px rgba(22, 185, 91, 0.2);
}

body.single-product .woocommerce-Reviews .comment-form .submit {
    background: #16B95B;
    color: #fff;
    border: 0;
    border-radius: 0.625rem;
    padding: 0.65rem 1.5rem;
    font-weight: 800;
    font-size: 0.8125rem;
    transition: background 0.2s ease;
}

body.single-product .woocommerce-Reviews .comment-form .submit:hover {
    background: #0F172A;
}

body.single-product .woocommerce-Reviews .comment-form-rating .stars a {
    color: #F59E0B;
}

/* ---- RELATED PRODUCTS ---- */
body.single-product .related {
    margin-top: 3.5rem;
}

body.single-product .related > h2,
body.single-product .upsells > h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 1.25rem;
}

body.single-product .related ul.products,
body.single-product .upsells ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.single-product .related ul.products::before,
body.single-product .related ul.products::after,
body.single-product .upsells ul.products::before,
body.single-product .upsells ul.products::after {
    display: none;
}

body.single-product .related ul.products li.product,
body.single-product .upsells ul.products li.product {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0.75rem;
    border-radius: 0.75rem;
    overflow: hidden;
    gap: 0.75rem;
}

body.single-product .related ul.products li.product a img,
body.single-product .upsells ul.products li.product a img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 0;
    background: #F1F5F9;
}

body.single-product .related ul.products li.product > .position-relative,
body.single-product .upsells ul.products li.product > .position-relative {
    margin-bottom: 0.5rem !important;
}

@media (max-width: 1199.98px) {
    body.single-product .related ul.products,
    body.single-product .upsells ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    body.single-product .related ul.products,
    body.single-product .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    body.single-product .related ul.products,
    body.single-product .upsells ul.products {
        grid-template-columns: 1fr;
    }
}

/* ---- MOBILE GALLERY ARROWS ---- */
body.single-product .paltech-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0F172A;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

body.single-product .paltech-gallery-prev {
    left: 0.5rem;
}

body.single-product .paltech-gallery-next {
    right: 0.5rem;
}

body.single-product .paltech-gallery-arrow:hover,
body.single-product .paltech-gallery-arrow:focus-visible {
    background: #fff;
    color: #16B95B;
    outline: none;
}

body.single-product .paltech-gallery-arrow:active {
    transform: translateY(-50%) scale(0.94);
}

@media (min-width: 768px) {
    body.single-product .paltech-gallery-arrow {
        display: none;
    }
}