/* ==========================================================================
   Phoenix BioLabs — Single Product Page
   Matches PH-redesign/product.html prototype.
   Last modified: 2026-03-13
   ========================================================================== */

/* ---- Elementor Theme Builder: match prototype layout (full width, no sidebar) ---- */
body.single-product div.elementor[data-elementor-type="product"],
body.single-product div.elementor.elementor-location-single {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- Main content width: match header (1280px) - override Elementor 1140px ---- */
body.single-product #primary,
body.single-product main#main,
body.single-product main#content,
body.single-product .site-main {
    max-width: var(--ph-max-width, 1280px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--ph-gutter, 1.5rem) !important;
    padding-right: var(--ph-gutter, 1.5rem) !important;
}

/* Elementor containers in content area — expand to match header */
body.single-product #primary .elementor-section-boxed > .elementor-container,
body.single-product #primary .e-con,
body.single-product main#main .elementor-section-boxed > .elementor-container,
body.single-product main#main .e-con,
body.single-product main#content .elementor-section-boxed > .elementor-container,
body.single-product main#content .e-con,
body.single-product .site-main .elementor-section-boxed > .elementor-container,
body.single-product .site-main .e-con {
    max-width: var(--ph-max-width, 1280px) !important;
}

body.single-product #primary .e-con,
body.single-product main#main .e-con,
body.single-product main#content .e-con,
body.single-product .site-main .e-con {
    --container-max-width: 1280px !important;
}

/* Parent container wrapping #primary (e.g. Elementor single template) */
body.single-product .elementor-container:has(#primary),
body.single-product .e-con:has(#primary) {
    max-width: var(--ph-max-width, 1280px) !important;
}

body.single-product .e-con:has(#primary) {
    --container-max-width: 1280px !important;
}

/* ---- Breadcrumb (prototype: text-[10px] py-8) ---- */
.woocommerce .woocommerce-breadcrumb {
    font-family: var(--ph-font-sans) !important;
    font-size: 0.625rem !important; /* text-[10px] */
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--ph-zinc-500) !important;
    padding: 2rem 0 !important;  /* py-8 */
    margin: 0 !important;
    background: none !important;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--ph-zinc-500) !important;
    text-decoration: none !important;
    transition: color var(--ph-trans-base) !important;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--ph-primary) !important;
}

.woocommerce .woocommerce-breadcrumb .breadcrumb-last,
.woocommerce .woocommerce-breadcrumb .breadcrumb-end {
    color: var(--ph-text) !important;
}

html.dark .woocommerce .woocommerce-breadcrumb .breadcrumb-last,
html.dark .woocommerce .woocommerce-breadcrumb .breadcrumb-end {
    color: #ffffff !important;
}

/* ---- Main product layout: 2-column grid (classic WooCommerce only, NOT Elementor) ---- */
/* Elementor Theme Builder uses its own layout; applying grid to div.elementor.product distorts the page. */
.woocommerce div.product:not(.elementor) {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 4rem;
    padding-bottom: 6rem;
    max-width: var(--ph-max-width, 1280px);
    margin: 0 auto;
    padding-left: var(--ph-gutter, 1.5rem);
    padding-right: var(--ph-gutter, 1.5rem);
}

@media (min-width: 1024px) {
    .woocommerce div.product:not(.elementor) {
        grid-template-columns: 1fr 1fr;
        gap: 4rem; /* gap-16 */
    }
}

/* Tabs and related/upsells must span full width (classic WooCommerce only) */
.woocommerce div.product:not(.elementor) .woocommerce-tabs,
.woocommerce div.product:not(.elementor) .related.products,
.woocommerce div.product:not(.elementor) .upsells.products {
    grid-column: 1 / -1 !important;
}

/* ---- Product gallery (left column) ---- */
.woocommerce div.product .woocommerce-product-gallery {
    position: relative !important;
    margin: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
    margin: 0 !important;
}

/* Flexslider/Flickity viewport — clip slides so previous image doesn't lag into view */
.woocommerce div.product .flex-viewport,
.woocommerce div.product .flickity-viewport {
    overflow: hidden !important;
}

/* Slide container — keep Flexslider-compatible (no display/aspect-ratio override) */
.woocommerce div.product .woocommerce-product-gallery__image {
    position: relative !important;
    background: var(--ph-zinc-50) !important;
    border: 1px solid var(--ph-zinc-100) !important;
    padding: 2rem !important;
    box-sizing: border-box !important;
    min-height: 300px;
    backface-visibility: hidden !important;
}

/* Inner anchor — centering + square aspect lives here so Flexslider controls the slide */
.woocommerce div.product .woocommerce-product-gallery__image > a,
.woocommerce div.product .woocommerce-product-gallery__image > img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
}

html.dark .woocommerce div.product .woocommerce-product-gallery__image {
    background: var(--ph-zinc-900) !important;
    border-color: var(--ph-zinc-800) !important;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    transition: transform var(--ph-trans-image) ease-in-out !important;
    backface-visibility: hidden !important;
}

.woocommerce div.product .woocommerce-product-gallery__image:hover img {
    transform: scale(1.05) !important;
}

/* Disable hover zoom — hide zoomImg overlay, image fills container without zoom effect */
.woocommerce div.product .woocommerce-product-gallery__image .zoomImg {
    display: none !important;
}

/* Gallery thumbnails - borders and active state (prototype: border-primary for selected) */
.woocommerce div.product .flex-control-thumbs,
.woocommerce div.product .woocommerce-product-gallery__thumbs {
    display: flex !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
}

.woocommerce div.product .flex-control-thumbs li,
.woocommerce div.product .woocommerce-product-gallery__thumbs .woocommerce-product-gallery__image {
    flex: 0 0 auto !important;
    margin: 0 !important;
    border: 2px solid var(--ph-zinc-200) !important;
    padding: 0.5rem !important;
    background: var(--ph-zinc-50) !important;
    cursor: pointer !important;
    transition: border-color var(--ph-trans-base) !important;
}

.woocommerce div.product .flex-control-thumbs li:hover,
.woocommerce div.product .woocommerce-product-gallery__thumbs .woocommerce-product-gallery__image:hover {
    border-color: var(--ph-zinc-400) !important;
}

.woocommerce div.product .flex-control-thumbs li.flex-active,
.woocommerce div.product .flex-control-thumbs li.is-nav-selected,
.woocommerce div.product .woocommerce-product-gallery__thumbs .woocommerce-product-gallery__image.flex-active {
    border-color: var(--ph-primary) !important;
}

html.dark .woocommerce div.product .flex-control-thumbs li,
html.dark .woocommerce div.product .woocommerce-product-gallery__thumbs .woocommerce-product-gallery__image {
    border-color: var(--ph-zinc-800) !important;
    background: var(--ph-zinc-900) !important;
}

html.dark .woocommerce div.product .flex-control-thumbs li.flex-active,
html.dark .woocommerce div.product .flex-control-thumbs li.is-nav-selected {
    border-color: var(--ph-primary) !important;
}

/* Sale/Badge flash (prototype: text-[9px] px-3 py-1 top-4 left-4) */
.woocommerce div.product .onsale,
.woocommerce span.onsale {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    font-family: var(--ph-font-sans) !important;
    font-size: 0.5625rem !important; /* text-[9px] */
    padding: 0.25rem 0.75rem !important;
    background: var(--ph-primary) !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 0 !important;
}

/* ---- Summary (right column) ---- */
/* Eyebrow (category) - prototype: text-primary text-[10px] uppercase tracking-[0.3em] font-semibold */
.woocommerce div.product .ph-product-eyebrow {
    display: block !important;
    font-family: var(--ph-font-sans) !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3em !important;
    color: var(--ph-primary) !important;
    margin-bottom: 0.5rem !important;
}

.woocommerce div.product .summary.entry-summary {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Product title (prototype: text-4xl / text-5xl) */
.woocommerce div.product .product_title {
    font-family: var(--ph-font-display) !important;
    font-size: 2.25rem !important;  /* text-4xl */
    line-height: 1.2 !important;
    font-weight: 400 !important;
    margin-bottom: 0.5rem !important;
    color: var(--ph-text) !important;
}

@media (min-width: 1024px) {
    .woocommerce div.product .product_title {
        font-size: 3rem !important;  /* text-5xl */
    }
}

/* Price + Rating row (prototype: flex items-center space-x-6) */

.woocommerce div.product .summary .price {
    font-size: 1.5rem !important;  /* text-2xl */
    font-weight: 300 !important;
    color: var(--ph-text) !important;
}

.woocommerce div.product .summary .price del {
    color: var(--ph-zinc-400) !important;
}

.woocommerce div.product .summary .price ins {
    text-decoration: none !important;
}

.woocommerce div.product .woocommerce-product-rating {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.woocommerce div.product .woocommerce-product-rating .star-rating {
    color: var(--ph-primary) !important;
}

.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
    font-size: 0.5625rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--ph-zinc-400) !important;
    margin-left: 0.5rem !important;
}

/* Price+rating row (prototype: space-x-6 mb-8 pb-8) */
.woocommerce div.product .ph-price-rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
    border-bottom: 1px solid var(--ph-zinc-100) !important;
}

html.dark .woocommerce div.product .ph-price-rating-row {
    border-bottom-color: var(--ph-zinc-900) !important;
}

.woocommerce div.product .ph-price-rating-row .price,
.woocommerce div.product .ph-price-rating-row .woocommerce-product-rating {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

html.dark .woocommerce div.product .summary > .woocommerce-product-rating,
html.dark .woocommerce div.product .summary > .price {
    border-bottom-color: var(--ph-zinc-900) !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .summary .woocommerce-product-details__short-description {
    font-family: var(--ph-font-sans) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: var(--ph-zinc-500) !important;
    margin-bottom: 2rem !important;
}

html.dark .woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--ph-zinc-400) !important;
}

/* Stock */
.woocommerce div.product .stock {
    font-size: 0.75rem !important;
    color: var(--ph-zinc-500) !important;
    margin-bottom: 1rem !important;
}

/* Promotion notice (e.g. "Add three of the same item...") - light grey box, rounded */
.woocommerce div.product .woocommerce-info,
.woocommerce div.product .promotion-notice,
.woocommerce div.product [class*="promo"],
.woocommerce div.product .summary > p.woocommerce-info {
    background: var(--ph-zinc-100) !important;
    border: 1px solid var(--ph-zinc-200) !important;
    color: var(--ph-zinc-600) !important;
    font-size: 0.8125rem !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1rem !important;
    border-radius: 0.25rem !important;
}

html.dark .woocommerce div.product .woocommerce-info,
html.dark .woocommerce div.product .promotion-notice,
html.dark .woocommerce div.product [class*="promo"] {
    background: var(--ph-zinc-900) !important;
    border-color: var(--ph-zinc-800) !important;
    color: var(--ph-zinc-400) !important;
}

/* Add to cart form (prototype: flex space-x-4, quantity w-1/3, buttons w-2/3 h-12) */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
}

.woocommerce div.product form.cart .quantity {
    flex: 0 0 auto !important;
    max-width: 8rem !important;
    margin-right: 0 !important;
}

/* Wrap quantity + primary buttons in a row */

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button[type="submit"] {
    min-width: 0 !important;
    height: 3rem !important;
}

.woocommerce div.product form.cart .quantity input.qty {
    width: 5rem !important;
    height: 3rem !important;
    text-align: center !important;
    font-family: var(--ph-font-sans) !important;
    font-size: 0.875rem !important;
    background: var(--ph-zinc-50) !important;
    border: 1px solid var(--ph-zinc-200) !important;
    border-radius: 0 !important;
}

html.dark .woocommerce div.product form.cart .quantity input.qty {
    background: var(--ph-zinc-900) !important;
    border-color: var(--ph-zinc-800) !important;
    color: #ffffff !important;
}

.woocommerce div.product form.cart .quantity input.qty:focus {
    border-color: var(--ph-primary) !important;
    outline: none !important;
}

/* Show quantity spinners so users can use +/- arrows to change quantity */

/* Add to cart button */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button[type="submit"] {
    font-family: var(--ph-font-sans) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    padding: 1rem 2rem !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    transition: all var(--ph-trans-base) !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button[type="submit"]:hover {
    background: var(--ph-primary) !important;
    color: #ffffff !important;
}

/* Buy now button (WPC plugin) - match Add to cart styling */
.woocommerce div.product form.cart .wpcbn-btn-single,
.woocommerce div.product form.cart button[name="buy-now"] {
    font-family: var(--ph-font-sans) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    padding: 1rem 2rem !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    height: 3rem !important;
}

.woocommerce div.product form.cart .wpcbn-btn-single:hover,
.woocommerce div.product form.cart button[name="buy-now"]:hover {
    background: var(--ph-primary) !important;
    color: #ffffff !important;
}

/* Points message (wployalty) - align with buttons row */
.woocommerce div.product .wlr-product-message,
.woocommerce div.product .summary .wlr-product-message,
.woocommerce div.product form.cart + *[class*="wlr"],
.woocommerce div.product .summary [class*="wlr-point"] {
    font-size: 0.5625rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--ph-zinc-400) !important;
    margin-top: 0.5rem !important;
    width: 100% !important;
}

html.dark .woocommerce div.product form.cart .single_add_to_cart_button,
html.dark .woocommerce div.product form.cart button[type="submit"] {
    background: #ffffff !important;
    color: #000000 !important;
}

html.dark .woocommerce div.product form.cart .single_add_to_cart_button:hover,
html.dark .woocommerce div.product form.cart button[type="submit"]:hover {
    background: var(--ph-primary) !important;
    color: #ffffff !important;
}

/* Product attributes table (Format, Concentration - prototype: border p-4 flex justify-between) */
.woocommerce div.product .woocommerce-product-attributes,
.woocommerce div.product table.shop_attributes {
    width: 100% !important;
    margin-bottom: 3rem !important;
    border-collapse: separate !important;
    border-spacing: 0 0.5rem !important;
}

.woocommerce div.product .woocommerce-product-attributes tr,
.woocommerce div.product table.shop_attributes tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: var(--ph-font-sans) !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--ph-zinc-500) !important;
    border: 1px solid var(--ph-zinc-200) !important;
    padding: 1rem !important;
}

.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td,
.woocommerce div.product table.shop_attributes th,
.woocommerce div.product table.shop_attributes td {
    border: none !important;
    padding: 0 !important;
    background: none !important;
}

.woocommerce div.product .woocommerce-product-attributes .woocommerce-product-attributes-item__value,
.woocommerce div.product table.shop_attributes td {
    color: var(--ph-text) !important;
}

html.dark .woocommerce div.product .woocommerce-product-attributes tr,
html.dark .woocommerce div.product table.shop_attributes tr {
    border-color: var(--ph-zinc-800) !important;
}

html.dark .woocommerce div.product .woocommerce-product-attributes .woocommerce-product-attributes-item__value,
html.dark .woocommerce div.product table.shop_attributes td {
    color: #ffffff !important;
}

/* Product meta (category, sku) - hide category when shown as eyebrow to avoid redundancy */
.woocommerce div.product .product_meta {
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--ph-zinc-500) !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--ph-zinc-100) !important;
}

.woocommerce div.product .product_meta .posted_in {
    display: none !important; /* Redundant with ph-product-eyebrow */
}

html.dark .woocommerce div.product .product_meta {
    border-top-color: var(--ph-zinc-900) !important;
}

.woocommerce div.product .product_meta a {
    color: var(--ph-text) !important;
}

.woocommerce div.product .product_meta a:hover {
    color: var(--ph-primary) !important;
}

/* ---- Tabs (Description, Reviews, etc.) ---- */
.woocommerce div.product .woocommerce-tabs {
    border-top: 1px solid var(--ph-zinc-100) !important;
    background: var(--ph-zinc-50) !important;
    margin-top: 0 !important;
}

html.dark .woocommerce div.product .woocommerce-tabs {
    border-top-color: var(--ph-zinc-900) !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex !important;
    border-bottom: 1px solid var(--ph-zinc-200) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

html.dark .woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom-color: var(--ph-zinc-800) !important;
    background: transparent !important;
}

/* Dark mode: inactive tabs — grey text, dark bg (avoid white-on-white) */
html.dark .woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a {
    color: var(--ph-zinc-400) !important;
    background: var(--ph-zinc-900) !important;
}

html.dark .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #ffffff !important;
    background: transparent !important;
}

html.dark .woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--ph-zinc-900) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: 1.5rem !important;  /* py-6 */
    font-family: var(--ph-font-sans) !important;
    font-size: 0.625rem !important;  /* text-[10px] */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;  /* tracking-[0.2em] */
    color: var(--ph-zinc-400) !important;
    text-decoration: none !important;
    transition: color var(--ph-trans-base) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--ph-text) !important;
    border-bottom: 2px solid var(--ph-primary) !important;
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 4rem 1.5rem !important;  /* py-16 px-6 — prototype */
    max-width: 56rem !important;      /* max-w-4xl — prototype */
    margin: 0 auto !important;
    text-align: center !important;    /* prototype: text-center */
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
    font-family: var(--ph-font-display) !important;
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel p {
    font-family: var(--ph-font-sans) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: var(--ph-zinc-500) !important;
}

html.dark .woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel p {
    color: var(--ph-zinc-400) !important;
}

/* ---- Related / Upsells (prototype: py-24 border-t) ---- */
.woocommerce .related.products,
.woocommerce .upsells.products {
    border-top: 1px solid var(--ph-zinc-100) !important;
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;  /* py-24 — match prototype */
    margin-top: 0 !important;
}

html.dark .woocommerce .related.products,
html.dark .woocommerce .upsells.products {
    border-top-color: var(--ph-zinc-900) !important;
}

/* Related section: eyebrow + title (prototype: mb-16) */
.woocommerce .related.products .ph-related-header {
    text-align: center !important;
    margin-bottom: 4rem !important;
}

.woocommerce .related.products .ph-related-eyebrow {
    display: block !important;
    font-family: var(--ph-font-sans) !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3em !important;
    color: var(--ph-primary) !important;
    margin-bottom: 0.5rem !important;
}

.woocommerce .related.products .ph-related-title {
    font-family: var(--ph-font-display) !important;
    font-size: 1.875rem !important;
    letter-spacing: 0.1em !important;
    margin: 0 !important;
}

.woocommerce .related.products h2,
.woocommerce .upsells.products h2 {
    font-family: var(--ph-font-display) !important;
    font-size: 1.875rem !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    margin-bottom: 4rem !important;
}

.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 2rem !important;  /* gap-8 */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

@media (min-width: 640px) {
    .woocommerce .related.products ul.products,
    .woocommerce .upsells.products ul.products {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .woocommerce .related.products ul.products,
    .woocommerce .upsells.products ul.products {
        grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    }
}

.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 1.5rem !important;  /* p-6 */
    border: 1px solid var(--ph-zinc-100) !important;
    background: var(--ph-card-bg) !important;
    transition: all var(--ph-trans-base) !important;
}

.woocommerce .related.products ul.products li.product:hover,
.woocommerce .upsells.products ul.products li.product:hover {
    border-color: var(--ph-primary) !important;
    box-shadow: var(--ph-shadow-xl) !important;
}

html.dark .woocommerce .related.products ul.products li.product,
html.dark .woocommerce .upsells.products ul.products li.product {
    border-color: var(--ph-zinc-900) !important;
}

.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce .upsells.products ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--ph-font-display) !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 0.25rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.woocommerce .related.products ul.products li.product .price,
.woocommerce .upsells.products ul.products li.product .price {
    font-size: 0.875rem !important;
}

.woocommerce .related.products ul.products li.product a.button,
.woocommerce .upsells.products ul.products li.product a.button {
    font-family: var(--ph-font-sans) !important;
    font-size: 0.5625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    padding: 0.75rem 1rem !important;
    min-width: 7rem !important;
    border: 1px solid var(--ph-zinc-200) !important;
    background: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
    transition: all var(--ph-trans-base) !important;
    text-align: center !important;
}

.woocommerce .related.products ul.products li.product a.button:hover,
.woocommerce .upsells.products ul.products li.product a.button:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

html.dark .woocommerce .related.products ul.products li.product a.button:hover,
html.dark .woocommerce .upsells.products ul.products li.product a.button:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

/* ---- Reviews ---- */
.woocommerce #reviews #comments .commentlist {
    list-style: none !important;
    padding: 0 !important;
}

.woocommerce #reviews #comments .commentlist li {
    padding: 1.5rem 0 !important;
    border-bottom: 1px solid var(--ph-zinc-200) !important;
}

html.dark .woocommerce #reviews #comments .commentlist li {
    border-bottom-color: var(--ph-zinc-800) !important;
}

.woocommerce #reviews #comments .commentlist li .comment-text {
    border: none !important;
    padding: 0 !important;
}

.woocommerce #reviews #comments .commentlist li .star-rating {
    color: var(--ph-primary) !important;
}