/* =========================================================
   TARAF WooCommerce hotfix — v1.3.1
   ========================================================= */

/* WordPress/WooCommerce should never render a fallback sidebar in TARAF. */
.woocommerce .widget-area,
.woocommerce-page .widget-area,
#secondary.widget-area {
    display: none !important;
}

/* Explicit product layout prevents tabs/related products from auto-flowing
   into the image and summary columns. */
body.single-product.woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "gallery"
        "summary"
        "tabs"
        "upsells"
        "related";
    gap: 2rem;
}

body.single-product.woocommerce div.product .woocommerce-product-gallery,
body.single-product.woocommerce div.product div.images {
    grid-area: gallery;
    min-width: 0;
}

body.single-product.woocommerce div.product .summary,
body.single-product.woocommerce div.product div.summary {
    grid-area: summary;
    min-width: 0;
}

body.single-product.woocommerce div.product .woocommerce-tabs {
    grid-area: tabs;
    width: 100%;
    margin: 1rem 0 0;
}

body.single-product.woocommerce div.product .upsells.products {
    grid-area: upsells;
    width: 100%;
    margin: 2rem 0 0;
}

body.single-product.woocommerce div.product .related.products {
    grid-area: related;
    width: 100%;
    margin: 2rem 0 0;
}

/* Graceful layout when WooCommerce does not output a gallery. */
body.single-product.woocommerce div.product:not(:has(.woocommerce-product-gallery)) {
    grid-template-areas:
        "summary"
        "tabs"
        "upsells"
        "related";
}

body.single-product.woocommerce div.product:not(:has(.woocommerce-product-gallery)) .summary {
    width: min(100%, 760px);
}

/* More controlled typography. */
body.single-product.woocommerce div.product .product_title {
    font-size: clamp(2.35rem, 4.2vw, 3.9rem);
}

/* Restore TARAF button treatment over WooCommerce/WordPress global styles. */
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button.button,
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button {
    min-height: 50px;
    padding: 0.85rem 1.5rem;
    border: 1px solid var(--text) !important;
    border-radius: 0 !important;
    background: var(--text) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.single-product.woocommerce div.product form.cart .single_add_to_cart_button.button:hover,
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    background: transparent !important;
    color: var(--text) !important;
}

/* Keep tabs and product sections from overlapping. */
body.single-product.woocommerce div.product .woocommerce-tabs,
body.single-product.woocommerce div.product .related.products,
body.single-product.woocommerce div.product .upsells.products {
    position: static;
    clear: both;
}

body.single-product.woocommerce div.product .woocommerce-tabs .panel {
    min-height: 0;
}

body.single-product.woocommerce div.product .related.products > h2,
body.single-product.woocommerce div.product .upsells.products > h2 {
    margin: 0 0 2rem;
    font-size: clamp(2rem, 4vw, 3.2rem);
}

/* Avoid sticky summary collisions on shorter screens. */
@media (min-width: 900px) {
    body.single-product.woocommerce div.product {
        grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
        grid-template-areas:
            "gallery summary"
            "tabs tabs"
            "upsells upsells"
            "related related";
        column-gap: clamp(2.5rem, 5vw, 5rem);
        row-gap: 2.5rem;
        align-items: start;
    }

    body.single-product.woocommerce div.product:not(:has(.woocommerce-product-gallery)) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "summary"
            "tabs"
            "upsells"
            "related";
    }

    body.single-product.woocommerce div.product div.summary {
        position: sticky;
        top: 110px;
    }

    body.single-product.woocommerce div.product:not(:has(.woocommerce-product-gallery)) div.summary {
        position: static;
    }
}

@media (max-height: 760px) and (min-width: 900px) {
    body.single-product.woocommerce div.product div.summary {
        position: static;
    }
}


/* =========================================================
   TARAF product-page polish — v1.3.2
   ========================================================= */

/*
 * A non-sticky summary is more stable for mixed product image sizes
 * and prevents the product details from visually overlapping tabs.
 */
body.single-product.woocommerce div.product div.summary,
body.single-product.woocommerce div.product .summary {
    position: static !important;
    top: auto !important;
    align-self: start;
}

/* Keep the desktop product row balanced. */
.single-product .taraf-shop-container {
    max-width: 1320px;
}

body.single-product.woocommerce div.product {
    row-gap: clamp(2.5rem, 6vw, 5rem);
}

/* Normalize the main product image area without distorting the image. */
.single-product .woocommerce-product-gallery {
    min-width: 0;
}

.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__image:first-child {
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f2f3f3;
}

.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__image:first-child
a {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.single-product
.woocommerce-product-gallery
.woocommerce-product-gallery__image:first-child
img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: contain;
}

/* Gallery thumbnails. */
.single-product .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.75rem !important;
}

.single-product .flex-control-thumbs li {
    float: none !important;
    width: auto !important;
}

.single-product .flex-control-thumbs img {
    aspect-ratio: 1;
    object-fit: cover;
    background: #f2f3f3;
}

/* Product summary. */
body.single-product.woocommerce div.product .summary {
    padding-top: 0.25rem;
}

body.single-product.woocommerce div.product .product_title {
    max-width: 620px;
    font-size: clamp(2.5rem, 4.3vw, 4.25rem);
}

body.single-product.woocommerce div.product p.price,
body.single-product.woocommerce div.product span.price {
    margin: 1.1rem 0 1.5rem;
    font-size: 1.08rem;
}

.single-product .woocommerce-product-details__short-description {
    margin-bottom: 1.75rem;
}

/* Override global WooCommerce purple button styles. */
body.single-product.woocommerce
div.product
form.cart
button.single_add_to_cart_button,
body.single-product.woocommerce
div.product
form.cart
.button.single_add_to_cart_button,
body.single-product.woocommerce
div.product
form.cart
button.button.alt {
    min-height: 50px !important;
    padding: 0.85rem 1.6rem !important;
    border: 1px solid #1e1e1e !important;
    border-radius: 0 !important;
    background-color: #1e1e1e !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-family: var(--body) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
}

body.single-product.woocommerce
div.product
form.cart
button.single_add_to_cart_button:hover,
body.single-product.woocommerce
div.product
form.cart
.button.single_add_to_cart_button:hover,
body.single-product.woocommerce
div.product
form.cart
button.button.alt:hover {
    background-color: transparent !important;
    color: #1e1e1e !important;
}

/* Reassurance rows. */
.single-product .product-reassurance {
    margin-top: 2rem;
}

.single-product .product-reassurance > div {
    padding: 1.05rem 0;
}

.single-product .product-reassurance strong {
    font-size: 1.05rem;
}

.single-product .product-reassurance span {
    line-height: 1.5;
}

/* Tabs should begin as an independent full-width section. */
body.single-product.woocommerce div.product .woocommerce-tabs {
    padding-top: clamp(1rem, 3vw, 2rem);
    border-top: 1px solid var(--light);
}

body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0 0 2rem;
}

body.single-product.woocommerce div.product .woocommerce-tabs .panel {
    max-width: 900px;
    margin: 0;
}

body.single-product.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
}

/* Related products form a separate catalogue section. */
body.single-product.woocommerce div.product .related.products {
    padding-top: clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid var(--light);
}

body.single-product.woocommerce div.product .related.products > h2 {
    margin: 0 0 2rem;
    text-align: left;
    font-size: clamp(2rem, 4vw, 3.25rem);
}

/* Product cards should not become excessively narrow. */
.single-product .related.products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
    body.single-product.woocommerce div.product {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(360px, 0.92fr);
        column-gap: clamp(3rem, 6vw, 6rem);
        align-items: start;
    }

    .single-product .related.products ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .single-product
    .woocommerce-product-gallery
    .woocommerce-product-gallery__image:first-child {
        aspect-ratio: 4 / 5;
    }

    body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
        gap: 1rem;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* =========================================================
   TARAF product layout correction — v1.4.0
   ========================================================= */

/*
 * On WooCommerce single-product pages, `single-product` and `woocommerce`
 * are body classes. These selectors intentionally target that structure.
 */
body.single-product.woocommerce div.product div.summary,
body.single-product.woocommerce div.product .summary {
    position: static !important;
    top: auto !important;
}

/* Allow the actual product image ratio to determine gallery height. */
body.single-product.woocommerce
.woocommerce-product-gallery
.woocommerce-product-gallery__image:first-child {
    aspect-ratio: auto !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
}

body.single-product.woocommerce
.woocommerce-product-gallery
.woocommerce-product-gallery__image:first-child
a {
    display: block !important;
    width: auto !important;
    height: auto !important;
}

body.single-product.woocommerce
.woocommerce-product-gallery
.woocommerce-product-gallery__image:first-child
img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
    background: transparent !important;
}

/* Correct full-width lower product sections. */
body.single-product.woocommerce div.product .woocommerce-tabs {
    grid-area: tabs !important;
    width: 100% !important;
}

body.single-product.woocommerce div.product .upsells.products {
    grid-area: upsells !important;
    width: 100% !important;
}

body.single-product.woocommerce div.product .related.products {
    grid-area: related !important;
    width: 100% !important;
}

/* TARAF add-to-cart button, overriding WooCommerce/global style presets. */
body.single-product.woocommerce
button.single_add_to_cart_button,
body.single-product.woocommerce
.button.single_add_to_cart_button,
body.single-product.woocommerce
button.button.alt.single_add_to_cart_button {
    border: 1px solid #1e1e1e !important;
    border-radius: 0 !important;
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.single-product.woocommerce
button.single_add_to_cart_button:hover,
body.single-product.woocommerce
.button.single_add_to_cart_button:hover,
body.single-product.woocommerce
button.button.alt.single_add_to_cart_button:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #1e1e1e !important;
}

/* The lower content starts after the complete product row. */
@media (min-width: 900px) {
    body.single-product.woocommerce div.product {
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr) !important;
        grid-template-areas:
            "gallery summary"
            "tabs tabs"
            "upsells upsells"
            "related related" !important;
        align-items: start !important;
    }
}