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

/* ---- 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);
    box-sizing: border-box !important;
    /* Grid items default min-width:auto — can prevent shrinking below slider width (mobile overflow) */
    min-width: 0 !important;
}

.woocommerce div.product:not(.elementor) > * {
    min-width: 0 !important;
}

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

/* Mobile / narrow: #primary already has horizontal padding — avoid double gutter + clip stray overflow */
@media (max-width: 1023px) {
    body.single-product #primary,
    body.single-product main#main,
    body.single-product main#content,
    body.single-product .site-main {
        overflow-x: clip !important;
        max-width: 100% !important;
    }

    .woocommerce div.product:not(.elementor) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 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) ---- */

/*
 * Rule: style the frame, never the slider internals.
 * WooCommerce + Flexslider own .flex-viewport, .slides, the slide <a>, and the slide <img>.
 * Touching width/height/position on those breaks thumbnail navigation and mobile layout.
 * We only add: min-width:0 on the grid item, and presentation (border/bg/dark-mode).
 *
 * WooCommerce's woocommerce.css sets float:left; width:48% on the gallery and
 * float:right; width:48% on .summary. Our CSS grid above removes the float effect
 * but the 48% width is still applied inside each grid cell — shrinking both columns
 * to half their allotted space. Reset to 100% so each fills its grid column.
 */
.woocommerce div.product:not(.elementor) .woocommerce-product-gallery,
.woocommerce div.product:not(.elementor) .summary.entry-summary {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Frame: border + background on every slide image container */
.woocommerce div.product .woocommerce-product-gallery__image {
    background: var(--ph-zinc-50) !important;
    border: 1px solid var(--ph-zinc-100) !important;
}

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

/* Subtle hover scale — look & feel only, no layout interference */
.woocommerce div.product .woocommerce-product-gallery__image img {
    transition: transform var(--ph-trans-image, 0.3s) ease-in-out !important;
}

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

/* Disable WooCommerce zoom lens (scale above is the hover effect instead) */
.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;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1023px) {
    .woocommerce div.product .flex-control-thumbs,
    .woocommerce div.product .woocommerce-product-gallery__thumbs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        padding-bottom: 0.25rem !important;
        gap: 0.75rem !important;
    }

    .woocommerce div.product .flex-control-thumbs li,
    .woocommerce div.product .woocommerce-product-gallery__thumbs .woocommerce-product-gallery__image {
        flex: 0 0 auto !important;
        max-width: 22vw !important;
        min-width: 3.5rem !important;
    }

    .woocommerce div.product .flex-control-thumbs li img,
    .woocommerce div.product .woocommerce-product-gallery__thumbs .woocommerce-product-gallery__image img {
        max-width: 100% !important;
        height: auto !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 .summary .promotion-notice,
.woocommerce div.product .summary > p.woocommerce-info,
.woocommerce div.product .summary > p[class*="promo-"] {
    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 */

/* Shared button chrome (Quick Buy Now also adds .single_add_to_cart_button — scope per role below) */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .wc-buy-now-btn-single,
.woocommerce div.product form.cart button[name="wc-quick-buy-now"],
.woocommerce div.product form.cart a.wc-buy-now-btn-single,
.woocommerce div.product form.cart .wpcbn-btn-single,
.woocommerce div.product form.cart button[name="buy-now"] {
    min-width: 0 !important;
    height: 3rem !important;
    box-sizing: border-box !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 = secondary (outline). Buy now = primary (high contrast).
 * Quick Buy Now plugin adds .single_add_to_cart_button to BOTH buttons — exclude .wc-buy-now-btn from add-to-cart rules.
 */
.woocommerce div.product form.cart button.single_add_to_cart_button:not(.wc-buy-now-btn) {
    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: transparent !important;
    color: var(--ph-text) !important;
    border: 2px solid var(--ph-zinc-400) !important;
    border-radius: 0 !important;
    transition: all var(--ph-trans-base) !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:not(.wc-buy-now-btn):hover {
    border-color: var(--ph-primary) !important;
    color: var(--ph-primary) !important;
    background: color-mix(in srgb, var(--ph-primary) 12%, transparent) !important;
}

/* Buy now — primary CTA (Quick Buy Now, WPC Buy Now, etc.) */
.woocommerce div.product form.cart .wc-buy-now-btn-single,
.woocommerce div.product form.cart button[name="wc-quick-buy-now"],
.woocommerce div.product form.cart a.wc-buy-now-btn-single,
.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: 2px solid #000000 !important;
    border-radius: 0 !important;
    transition: all var(--ph-trans-base) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce div.product form.cart a.wc-buy-now-btn-single {
    line-height: 1.2 !important;
}

.woocommerce div.product form.cart .wc-buy-now-btn-single:hover,
.woocommerce div.product form.cart button[name="wc-quick-buy-now"]:hover,
.woocommerce div.product form.cart a.wc-buy-now-btn-single:hover,
.woocommerce div.product form.cart .wpcbn-btn-single:hover,
.woocommerce div.product form.cart button[name="buy-now"]:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-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 + .wlr-product-message,
.woocommerce div.product form.cart + .wlr-points-message,
.woocommerce div.product .summary .wlr-points-message,
.woocommerce div.product .summary p[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;
}

/* Dark mode: add to cart stays subtle outline */
html.dark .woocommerce div.product form.cart button.single_add_to_cart_button:not(.wc-buy-now-btn) {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

html.dark .woocommerce div.product form.cart button.single_add_to_cart_button:not(.wc-buy-now-btn):hover {
    border-color: var(--ph-primary) !important;
    color: #ffffff !important;
    background: color-mix(in srgb, var(--ph-primary) 18%, transparent) !important;
}

/* Dark mode: buy now = strongest contrast (solid light fill) */
html.dark .woocommerce div.product form.cart .wc-buy-now-btn-single,
html.dark .woocommerce div.product form.cart button[name="wc-quick-buy-now"],
html.dark .woocommerce div.product form.cart a.wc-buy-now-btn-single,
html.dark .woocommerce div.product form.cart .wpcbn-btn-single,
html.dark .woocommerce div.product form.cart button[name="buy-now"] {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

html.dark .woocommerce div.product form.cart .wc-buy-now-btn-single:hover,
html.dark .woocommerce div.product form.cart button[name="wc-quick-buy-now"]:hover,
html.dark .woocommerce div.product form.cart a.wc-buy-now-btn-single:hover,
html.dark .woocommerce div.product form.cart .wpcbn-btn-single:hover,
html.dark .woocommerce div.product form.cart button[name="buy-now"]:hover {
    background: var(--ph-primary) !important;
    color: #000000 !important;
    border-color: var(--ph-primary) !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-auto-flow: row !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.columns-1,
    .woocommerce .upsells.products ul.products.columns-1 {
        grid-template-columns: repeat(1, minmax(220px, 1fr)) !important;
    }
    .woocommerce .related.products ul.products.columns-2,
    .woocommerce .upsells.products ul.products.columns-2 {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
    .woocommerce .related.products ul.products.columns-3,
    .woocommerce .upsells.products ul.products.columns-3 {
        grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    }
    .woocommerce .related.products ul.products.columns-4,
    .woocommerce .upsells.products ul.products.columns-4 {
        grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    }
}

.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product {
    float: none !important;
    clear: none !important;
    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;
}

/* Force deterministic column layout from template count class (prevents orphan row glitches). */
@media (min-width: 1024px) {
    .woocommerce .related.products.ph-related-products--cols-1 ul.products {
        grid-template-columns: repeat(1, minmax(280px, 420px)) !important;
        justify-content: center !important;
    }
    .woocommerce .related.products.ph-related-products--cols-2 ul.products {
        grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    }
    .woocommerce .related.products.ph-related-products--cols-3 ul.products {
        grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    }
    .woocommerce .related.products.ph-related-products--cols-4 ul.products {
        grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    }
}

/* Related split layout: one featured upsell + scrollable related rail. */
.woocommerce .related.products .ph-related-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.woocommerce .related.products .ph-related-feature,
.woocommerce .related.products .ph-related-rail {
    min-width: 0;
}

.woocommerce .related.products .ph-related-feature ul.products,
.woocommerce .related.products .ph-related-rail ul.products {
    grid-template-columns: 1fr !important;
}

.woocommerce .related.products .ph-related-feature ul.products li.product {
    padding: 2rem !important;
    border-color: var(--ph-primary) !important;
    box-shadow: var(--ph-shadow-xl) !important;
}

.woocommerce .related.products .ph-related-feature ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
}

.woocommerce .related.products .ph-related-feature ul.products li.product .price {
    font-size: 1rem !important;
}

/* Featured card actions: keep both CTAs side-by-side and centered. */
.woocommerce .related.products .ph-related-feature ul.products li.product {
    text-align: center !important;
}

.woocommerce .related.products .ph-related-feature ul.products li.product > a.button,
.woocommerce .related.products .ph-related-feature ul.products li.product > a.added_to_cart,
.woocommerce .related.products .ph-related-feature ul.products li.product > a[class*="wpcbn"],
.woocommerce .related.products .ph-related-feature ul.products li.product > a[class*="buy-now"] {
    display: inline-flex !important;
    width: auto !important;
    min-width: 8.5rem !important;
    justify-content: center !important;
    margin: 0.5rem 0.35rem 0 !important;
    vertical-align: top !important;
}

/* Hide points/loyalty line only in featured card to avoid CTA row break. */
.woocommerce .related.products .ph-related-feature ul.products li.product .wlr-product-message,
.woocommerce .related.products .ph-related-feature ul.products li.product .wlr-points-message,
.woocommerce .related.products .ph-related-feature ul.products li.product .wlr-earned-points,
.woocommerce .related.products .ph-related-feature ul.products li.product .wlr-earned-points-message,
.woocommerce .related.products .ph-related-feature ul.products li.product p[class*="wlr-point"] {
    display: none !important;
}

.woocommerce .related.products .ph-related-rail ul.products {
    gap: 1rem !important;
}

.woocommerce .related.products .ph-related-rail ul.products li.product {
    padding: 1rem !important;
}

.woocommerce .related.products .ph-related-rail ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.75rem !important;
}

.woocommerce .related.products .ph-related-rail ul.products li.product .price {
    font-size: 0.8125rem !important;
}

.woocommerce .related.products .ph-related-rail ul.products li.product a.button {
    font-size: 0.5rem !important;
    padding: 0.625rem 0.75rem !important;
}

/* Rail card actions: keep Add to cart + Buy now side-by-side and centered. */
.woocommerce .related.products .ph-related-rail ul.products li.product {
    text-align: center !important;
}

.woocommerce .related.products .ph-related-rail ul.products li.product > a.button,
.woocommerce .related.products .ph-related-rail ul.products li.product > a.added_to_cart,
.woocommerce .related.products .ph-related-rail ul.products li.product > a[class*="wpcbn"],
.woocommerce .related.products .ph-related-rail ul.products li.product > a[class*="buy-now"] {
    display: inline-flex !important;
    width: auto !important;
    min-width: 6.75rem !important;
    justify-content: center !important;
    margin: 0.4rem 0.2rem 0 !important;
    vertical-align: top !important;
}

/* WPC Buy Now loop markup compatibility (wrapper + anchor variants). */
.woocommerce .related.products .ph-related-rail ul.products li.product [class*="wpcbn"] {
    width: auto !important;
}

.woocommerce .related.products .ph-related-rail ul.products li.product .wpcbn-wrap,
.woocommerce .related.products .ph-related-rail ul.products li.product [class*="wpcbn-btn"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 6.75rem !important;
    margin: 0.4rem 0.2rem 0 !important;
    vertical-align: top !important;
}

/* Hide points/loyalty line in rail so CTA row stays clean and horizontal. */
.woocommerce .related.products .ph-related-rail ul.products li.product .wlr-product-message,
.woocommerce .related.products .ph-related-rail ul.products li.product .wlr-points-message,
.woocommerce .related.products .ph-related-rail ul.products li.product .wlr-earned-points,
.woocommerce .related.products .ph-related-rail ul.products li.product .wlr-earned-points-message,
.woocommerce .related.products .ph-related-rail ul.products li.product p[class*="wlr-point"] {
    display: none !important;
}

@media (min-width: 1024px) {
    .woocommerce .related.products .ph-related-split--with-rail {
        grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr);
        align-items: start;
        gap: 1.5rem;
    }

    .woocommerce .related.products .ph-related-rail {
        max-height: 46rem;
        overflow-y: auto;
        padding-right: 0.5rem;
    }

    .woocommerce .related.products .ph-related-rail::-webkit-scrollbar {
        width: 8px;
    }

    .woocommerce .related.products .ph-related-rail::-webkit-scrollbar-thumb {
        background: rgba(197, 160, 89, 0.45);
        border-radius: 999px;
    }
}

.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;
}

/* Product-card ratings: use Phoenix star styling (consistent with site design). */
.woocommerce .related.products ul.products li.product .star-rating,
.woocommerce .upsells.products ul.products li.product .star-rating {
    float: none !important;
    margin: 0.35rem auto 0.5rem !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.08em !important;
}

.woocommerce .related.products ul.products li.product .star-rating::before,
.woocommerce .upsells.products ul.products li.product .star-rating::before {
    color: rgba(197, 160, 89, 0.28) !important;
}

.woocommerce .related.products ul.products li.product .star-rating span::before,
.woocommerce .upsells.products ul.products li.product .star-rating span::before {
    color: var(--ph-primary) !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;
}