/* =============================================================================
   WOOCOMMERCE.CSS — Telehealth Base Template
   Overrides default WooCommerce styles to match our design token system.
   IMPORTANT: Pre-Woo Integration plugin requires the standard WooCommerce
   Checkout and Thank You pages — do NOT replace these with custom pages.
   ============================================================================= */

/* =============================================================================
   GENERAL WOOCOMMERCE RESET
   ============================================================================= */

.woocommerce,
.woocommerce-page {
    font-family: var(--font-body);
    color: var(--color-text);
}

/* =============================================================================
   PRODUCT ARCHIVE  (Shop / Treatments Listing page)
   ============================================================================= */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce ul.products li.product {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
    text-align: center;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Product image */
.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 0;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: var(--text-medium);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding: var(--space-sm) var(--space-md) 0;
}

/* Product price */
.woocommerce ul.products li.product .price {
    font-family: var(--font-heading);
    font-size: var(--text-large);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    display: block;
    padding: var(--space-xs) var(--space-md);
}

/* Add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    display: block;
    width: calc(100% - var(--space-md) * 2);
    margin: var(--space-xs) var(--space-md) var(--space-md);
    background-color: var(--color-cta);
    border: none;
    color: var(--color-cta-text);
    font-family: var(--font-ui);
    font-size: var(--text-regular);
    font-weight: var(--font-weight-normal);
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    text-align: center;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-cta-text-hover);
}

/* =============================================================================
   SINGLE PRODUCT  (Product / Treatment Detail page)
   ============================================================================= */

.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.woocommerce div.product .summary {
    padding: 0;
}

/* Product title */
.woocommerce div.product .product_title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

/* Price */
.woocommerce div.product .price {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Description */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: var(--text-regular);
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-lg);
}

/* Add to cart — outline on product page; Buy Now stays solid CTA in .nova-sp-button-row */
.woocommerce div.product form.cart .single_add_to_cart_button {
    background-color: transparent;
    border: 1px solid var(--color-neutral-darkest, #000);
    color: var(--color-neutral-darkest, #000);
    font-family: var(--font-ui);
    font-size: var(--text-regular);
    padding: 12px 32px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background-color: var(--color-bg-light, #E8F3FE);
    border-color: var(--color-cta, #1C34A7);
    color: var(--color-neutral-darkest, #000);
}

/* Tabs (product description / reviews) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
    padding: 0;
    margin-bottom: var(--space-xl);
    list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-ui);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all var(--transition);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

@media (max-width: 768px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   CART PAGE — base table styles (nova-cart-table uses checkout styles in global.css)
   ============================================================================= */

.woocommerce table.cart:not(.nova-cart-table) {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-xl);
}

.woocommerce table.cart:not(.nova-cart-table) th {
    font-family: var(--font-ui);
    font-size: var(--text-small);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm) var(--space-md);
}

.woocommerce table.cart:not(.nova-cart-table) td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--color-cta);
    color: var(--color-cta-text);
    font-family: var(--font-ui);
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    border: none;
    transition: background-color var(--transition), color var(--transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-cta-text-hover);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: var(--color-secondary);
}

/* =============================================================================
   CHECKOUT PAGE
   IMPORTANT: Do not heavily modify — Pre-Woo Integration hooks into
   standard WooCommerce checkout. Keep form structure intact.
   ============================================================================= */

.woocommerce-checkout {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--container-padding);
}

.woocommerce-checkout h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-checkout .form-row label {
    font-family: var(--font-ui);
    font-size: var(--text-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-darkest);
    margin-bottom: var(--space-xs);
}

.woocommerce-checkout .form-row input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: var(--text-regular);
    color: var(--color-text);
    width: 100%;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.12);
    outline: none;
}

#place_order {
    width: 100%;
    background-color: var(--color-cta);
    color: var(--color-cta-text);
    font-family: var(--font-ui);
    font-size: var(--text-medium);
    font-weight: var(--font-weight-semibold);
    padding: 14px 32px;
    border: none;
    border-radius: 55px !important;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

#place_order:hover,
#place_order:focus-visible {
    background-color: var(--color-cta-hover);
    border: none;
    color: var(--color-cta-text-hover);
}

/* =============================================================================
   THANK YOU PAGE
   Pre-Woo Integration injects questionnaire link here — do NOT remove
   the standard WooCommerce order confirmation page.
   Style the container, not the hook output.
   ============================================================================= */

.woocommerce-order {
    max-width: 640px;
    margin: var(--space-3xl) auto;
    padding: var(--space-2xl);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.woocommerce-order .woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    list-style: none;
    margin-bottom: var(--space-xl);
}

.woocommerce-order .woocommerce-order-overview li {
    font-size: var(--text-small);
    color: var(--color-text-muted);
}

.woocommerce-order .woocommerce-order-overview strong {
    color: var(--color-text);
}

/* Pre-Woo questionnaire link block */
.pre-woo-questionnaire {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
}

.pre-woo-questionnaire a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* =============================================================================
   MY ACCOUNT PAGE
   ============================================================================= */

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 220px;
    flex-shrink: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-ui);
    font-size: var(--text-regular);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background-color: var(--color-bg-light);
    color: var(--color-primary);
}

/* =============================================================================
   HEADER CART BUTTON (#cartButton)
   ============================================================================= */

#cartButton.nova-cart-button,
a#cartButton,
[data-nova-cart-button].nova-cart-button {
    position: relative;
    background-color: transparent !important;
    border: 0 !important;
    transition: color 0.2s ease;
}

.elementor-location-header .elementor-element-8a6e785 .elementor-button:hover,
.elementor-location-header .elementor-element-8a6e785 .elementor-button:focus-visible,
#cartButton.nova-cart-button:hover,
#cartButton.nova-cart-button:focus-visible,
[data-nova-cart-button].nova-cart-button:hover,
[data-nova-cart-button].nova-cart-button:focus-visible {
    background-color: transparent !important;
    border-color: transparent !important;
}

@media (min-width: 1025px) {
    .elementor-location-header .elementor-element-8a6e785 .elementor-button:hover svg path,
    .elementor-location-header .elementor-element-8a6e785 .elementor-button:focus-visible svg path,
    #cartButton.nova-cart-button:hover svg path,
    #cartButton.nova-cart-button:focus-visible svg path,
    [data-nova-cart-button].nova-cart-button:hover svg path,
    [data-nova-cart-button].nova-cart-button:focus-visible svg path {
        stroke: var(--color-cta, #1C34A7) !important;
    }
}

@media (max-width: 1024px) {
    .elementor-location-header .elementor-element-8a6e785 .elementor-button svg path,
    .elementor-location-header .elementor-element-8a6e785 .elementor-button:hover svg path,
    .elementor-location-header .elementor-element-8a6e785 .elementor-button:focus-visible svg path,
    .elementor-location-header .elementor-element-8a6e785 .elementor-button:active svg path,
    #cartButton svg path,
    #cartButton.nova-cart-button svg path,
    #cartButton.nova-cart-button:hover svg path,
    #cartButton.nova-cart-button:focus-visible svg path,
    #cartButton.nova-cart-button:active svg path,
    a#cartButton svg path,
    [data-nova-cart-button].nova-cart-button svg path,
    [data-nova-cart-button].nova-cart-button:hover svg path,
    [data-nova-cart-button].nova-cart-button:focus-visible svg path,
    [data-nova-cart-button].nova-cart-button:active svg path {
        stroke: #000000 !important;
    }
}

#cartButton .nova-cart-count,
[data-nova-cart-button] .nova-cart-count {
    position: absolute;
    top: 3px;
    right: -1px;
    border: 3px solid white;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--color-cta, #1C34A7);
    color: var(--color-cta-text, #FFFFFF);
    font-family: var(--font-ui, "Roboto", sans-serif);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#cartButton.has-cart-items .nova-cart-count,
#cartButton .nova-cart-count.has-items,
[data-nova-cart-button].has-cart-items .nova-cart-count,
[data-nova-cart-button] .nova-cart-count.has-items {
    opacity: 1;
    transform: scale(1);
}

#cartButton.has-cart-items .nova-cart-count.is-pulse,
[data-nova-cart-button].has-cart-items .nova-cart-count.is-pulse {
    animation: nova-cart-pulse 0.45s ease;
}

@keyframes nova-cart-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* =============================================================================
   NOTICES
   ============================================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-cart .cart-empty {
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-regular);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    list-style: none;
}

.woocommerce-message {
    background-color: #4caa69;
    color: #fff;
    max-width: 1340px;
    font-weight: 600;
    font-size: 14px;
    padding: 15px 30px;
    outline: none;
}

.woocommerce-checkout .woocommerce-info{
    background-color: #f28830;
    border-color: #f28830;
    color: #fff;
    max-width: 1340px;
    font-weight: 600;
    font-size: 14px;
    padding: 15px 30px;
}

.woocommerce-error {
    background-color: #e43838;
    color: #fff;
    max-width: 1340px;
    font-weight: 600;
    font-size: 14px;
    padding: 15px 30px;
}


.woocommerce-checkout .woocommerce-info a,
.woocommerce-error a,
.woocommerce-message a{
    color: inherit !important;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-cart .cart-empty{
    margin: 20px auto;
}

.woocommerce-info {
    background-color: #eff6ff;
    border-left-color: var(--color-primary);
    color: #1e40af;
}

/* =============================================================================
   ELEMENTOR LOOP-GRID PRODUCT CARDS  (template 157 / loop-item)
   Supplements widget-level settings that Elementor cannot expose directly.
   ============================================================================= */

/* Short description — centre-align all text inside the widget */
.elementor-widget-woocommerce-product-short-description
    .woocommerce-product-details__short-description,
.elementor-widget-woocommerce-product-short-description
    .woocommerce-product-details__short-description p {
    text-align: center;
    margin: 0;
}

/* Product images inside loop items — remove default gallery chrome */
.elementor-loop-item .woocommerce-product-gallery__wrapper {
    margin: 0;
}
.elementor-loop-item .woocommerce-product-gallery figure {
    margin: 0;
}
.elementor-loop-item .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: 365px;
    object-fit: cover;
    display: block;
}

/* Add-to-cart in loop items — hide quantity input, keep only button */
.elementor-loop-item .cart .quantity {
    display: none !important;
}
.elementor-loop-item .cart .single_add_to_cart_button,
.elementor-loop-item .cart button[type="submit"] {
    width: 100%;
    margin: 0;
}