/**
 * GoodSalla — WooCommerce CSS Overrides
 *
 * Replaces WooCommerce's default styles (woocommerce-general,
 * woocommerce-layout, woocommerce-smallscreen).
 *
 * Covers:
 *   - Notices (error, success, info)
 *   - Shop archive layout
 *   - Breadcrumbs
 *   - Sorting / filtering bar
 *   - Cart & mini-cart
 *   - Checkout form
 *   - Order review
 *   - My Account
 *   - Product single: images, summary, tabs, reviews
 *
 * @package GoodSalla
 */

/* ═══════════════════════════════════════════════════════════
   NOTICES
═══════════════════════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner {
    padding: var(--gs-space-4) var(--gs-space-5);
    border-radius: var(--gs-radius-md);
    font-size: var(--gs-text-sm);
    border-left: 4px solid;
    margin-bottom: var(--gs-space-5);
    display: flex;
    align-items: flex-start;
    gap: var(--gs-space-3);
}

.woocommerce-message {
    background: var(--gs-color-success-light);
    border-color: var(--gs-color-success);
    color: #155724;
}

.woocommerce-error {
    background: var(--gs-color-error-light);
    border-color: var(--gs-color-error);
    color: #721c24;
}

.woocommerce-info {
    background: var(--gs-color-info-light);
    border-color: var(--gs-color-info);
    color: #0c5460;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
    margin-left: auto;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMBS
═══════════════════════════════════════════════════════════ */
.woocommerce-breadcrumb,
.gs-breadcrumb {
    font-size: var(--gs-text-sm);
    color: var(--gs-color-text-muted);
    margin-bottom: var(--gs-space-6);
    padding: var(--gs-space-3) 0;
}

.woocommerce-breadcrumb a,
.gs-breadcrumb__item a {
    color: var(--gs-color-text-muted);
    text-decoration: none;
    transition: color var(--gs-transition-fast);
}

.woocommerce-breadcrumb a:hover,
.gs-breadcrumb__item a:hover {
    color: var(--gs-color-primary);
}

.woocommerce-breadcrumb .separator {
    margin: 0 var(--gs-space-2);
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════
   SHOP ARCHIVE
═══════════════════════════════════════════════════════════ */
.woocommerce-products-header {
    margin-bottom: var(--gs-space-6);
}

.woocommerce-products-header__title.page-title {
    font-family: var(--gs-font-heading);
    font-size: clamp(var(--gs-text-2xl), 3vw, var(--gs-text-4xl));
    color: var(--gs-color-heading);
}

/* Sorting bar */
.woocommerce-ordering,
.woocommerce-result-count {
    font-size: var(--gs-text-sm);
    color: var(--gs-color-text-muted);
    margin-bottom: var(--gs-space-5);
}

.woocommerce-ordering select,
.woocommerce select {
    padding: var(--gs-space-2) var(--gs-space-4);
    border: 1.5px solid var(--gs-color-border-strong);
    border-radius: var(--gs-radius-md);
    font-size: var(--gs-text-sm);
    background: var(--gs-color-white);
    color: var(--gs-color-text);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a766d' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--gs-space-3) center;
    padding-right: var(--gs-space-8);
    cursor: pointer;
}

.woocommerce-ordering select:focus,
.woocommerce select:focus {
    border-color: var(--gs-color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce BUTTONS
═══════════════════════════════════════════════════════════ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--gs-space-3) var(--gs-space-6);
    background: var(--gs-color-primary);
    color: var(--gs-color-white);
    border: 2px solid var(--gs-color-primary);
    border-radius: var(--gs-radius-md);
    font-size: var(--gs-text-sm);
    font-weight: var(--gs-font-semibold);
    font-family: var(--gs-font-body);
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--gs-transition-fast),
        border-color var(--gs-transition-fast),
        box-shadow var(--gs-transition-fast);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: var(--gs-color-primary-hover);
    border-color: var(--gs-color-primary-hover);
    color: var(--gs-color-white);
    box-shadow: 0 4px 12px rgba(0, 116, 217, 0.3);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--gs-color-heading);
    border-color: var(--gs-color-heading);
    color: var(--gs-color-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: #34421e;
    border-color: #34421e;
    color: var(--gs-color-white);
}

/* Disabled */
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   SINGLE PRODUCT
═══════════════════════════════════════════════════════════ */
.single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gs-space-12);
    align-items: start;
}

/* Product images */
.single-product div.product .woocommerce-product-gallery {
    position: sticky;
    top: calc(var(--gs-header-height) + var(--gs-space-5));
}

.single-product div.product .woocommerce-product-gallery__wrapper img {
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-sm);
}

.single-product div.product .flex-viewport {
    border-radius: var(--gs-radius-lg);
    overflow: hidden;
}

/* Summary panel */
.single-product div.product .summary {
    padding-top: var(--gs-space-4);
}

.single-product div.product .summary .product_title {
    font-family: var(--gs-font-heading);
    font-size: clamp(var(--gs-text-2xl), 3vw, var(--gs-text-4xl));
    color: var(--gs-color-heading);
    margin-bottom: var(--gs-space-3);
    line-height: var(--gs-leading-tight);
}

/* WooCommerce star rating */
.woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: var(--gs-space-3);
    margin-bottom: var(--gs-space-4);
}

.star-rating {
    font-size: var(--gs-text-sm);
    color: var(--gs-color-yellow);
    overflow: hidden;
}

.star-rating::before {
    color: var(--gs-color-gray-300);
    content: '\73\73\73\73\73';
}

.star-rating span::before {
    color: var(--gs-color-yellow);
    content: '\73\73\73\73\73';
}

/* Price */
.single-product div.product .price {
    display: flex;
    align-items: baseline;
    gap: var(--gs-space-3);
    margin-bottom: var(--gs-space-5);
}

.single-product div.product .price ins {
    font-size: var(--gs-text-2xl);
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-sale);
    text-decoration: none;
}

.single-product div.product .price del {
    font-size: var(--gs-text-lg);
    color: var(--gs-color-text-muted);
}

.single-product div.product .price:not(:has(del)) {
    font-size: var(--gs-text-2xl);
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-text);
}

/* Short description */
.single-product div.product .woocommerce-product-details__short-description {
    color: var(--gs-color-text-muted);
    font-size: var(--gs-text-base);
    line-height: var(--gs-leading-relaxed);
    margin-bottom: var(--gs-space-6);
}

/* Quantity input */
.woocommerce div.product form.cart .quantity {
    display: flex;
    align-items: center;
}

.woocommerce div.product form.cart .qty {
    width: 70px;
    height: 44px;
    text-align: center;
    border: 1.5px solid var(--gs-color-border-strong);
    border-radius: var(--gs-radius-md);
    font-size: var(--gs-text-base);
    font-weight: var(--gs-font-semibold);
}

.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: var(--gs-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--gs-space-6);
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1;
    min-width: 180px;
    padding: var(--gs-space-4) var(--gs-space-6);
    font-size: var(--gs-text-base);
}

/* Stock */
.woocommerce-product-details .stock {
    font-size: var(--gs-text-sm);
    font-weight: var(--gs-font-medium);
}

.woocommerce-product-details .in-stock {
    color: var(--gs-color-in-stock);
}

.woocommerce-product-details .out-of-stock {
    color: var(--gs-color-out-of-stock);
}

/* Product meta (SKU, categories) */
.woocommerce-product-details__meta,
.product_meta {
    padding-top: var(--gs-space-5);
    border-top: 1px solid var(--gs-color-border);
    font-size: var(--gs-text-sm);
    color: var(--gs-color-text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
}

.product_meta a {
    color: var(--gs-color-primary);
}

/* ─── Product Tabs ─────────────────────────────────────────── */
.woocommerce-tabs {
    margin-top: var(--gs-space-12);
    grid-column: 1 / -1;
}

.woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid var(--gs-color-border);
}

.woocommerce-tabs ul.tabs li {
    margin: 0;
}

.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--gs-space-3) var(--gs-space-6);
    font-size: var(--gs-text-sm);
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--gs-transition-fast), border-color var(--gs-transition-fast);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    color: var(--gs-color-primary);
    border-bottom-color: var(--gs-color-primary);
}

.woocommerce-tabs .panel {
    padding: var(--gs-space-8) 0;
    max-width: 800px;
    line-height: var(--gs-leading-relaxed);
    color: var(--gs-color-text);
}

/* ─── Reviews ──────────────────────────────────────────────── */
#reviews #comments ol.commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#reviews #comments ol.commentlist li {
    padding: var(--gs-space-6) 0;
    border-bottom: 1px solid var(--gs-color-border);
}

#reviews .comment-text {
    font-size: var(--gs-text-sm);
    color: var(--gs-color-text);
    line-height: var(--gs-leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   CART
═══════════════════════════════════════════════════════════ */
.woocommerce-cart-form__contents {
    border-collapse: collapse;
    width: 100%;
}

.woocommerce-cart-form__contents th {
    font-size: var(--gs-text-xs);
    font-weight: var(--gs-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gs-color-text-muted);
    padding: var(--gs-space-3) var(--gs-space-4);
    border-bottom: 1px solid var(--gs-color-border);
    text-align: left;
}

.woocommerce-cart-form__contents td {
    padding: var(--gs-space-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--gs-color-border);
}

.woocommerce-cart-form__contents .product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--gs-radius-md);
}

.woocommerce-cart-form__contents .product-name a {
    font-weight: var(--gs-font-medium);
    color: var(--gs-color-text);
    text-decoration: none;
}

.woocommerce-cart-form__contents .product-name a:hover {
    color: var(--gs-color-primary);
}

.cart-collaterals {
    margin-top: var(--gs-space-8);
}

.cart_totals {
    background: var(--gs-color-surface);
    border-radius: var(--gs-radius-lg);
    padding: var(--gs-space-6);
    max-width: 420px;
    margin-left: auto;
}

.cart_totals h2 {
    font-family: var(--gs-font-heading);
    font-size: var(--gs-text-xl);
    color: var(--gs-color-heading);
    margin-bottom: var(--gs-space-5);
}

.cart_totals table {
    width: 100%;
}

.cart_totals table th {
    font-size: var(--gs-text-sm);
    color: var(--gs-color-text-muted);
    font-weight: var(--gs-font-normal);
    padding: var(--gs-space-3) 0;
}

.cart_totals table td {
    font-size: var(--gs-text-sm);
    font-weight: var(--gs-font-semibold);
    text-align: right;
    padding: var(--gs-space-3) 0;
}

.cart_totals .order-total td {
    font-size: var(--gs-text-lg);
    color: var(--gs-color-text);
}

.wc-proceed-to-checkout .checkout-button {
    width: 100%;
    margin-top: var(--gs-space-4);
    padding: var(--gs-space-4);
    font-size: var(--gs-text-base);
}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT
═══════════════════════════════════════════════════════════ */
.woocommerce-checkout #payment {
    background: var(--gs-color-surface);
    border-radius: var(--gs-radius-lg);
    padding: var(--gs-space-6);
}

.woocommerce-checkout #payment .payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--gs-color-border);
    margin-bottom: var(--gs-space-5);
}

.woocommerce-checkout #payment .payment_methods li {
    padding: var(--gs-space-3) 0;
    border-top: 1px solid var(--gs-color-border);
}

/* Checkout form fields */
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row {
    margin-bottom: var(--gs-space-4);
}

.woocommerce-billing-fields .form-row label,
.woocommerce-shipping-fields .form-row label {
    display: block;
    font-size: var(--gs-text-sm);
    font-weight: var(--gs-font-medium);
    margin-bottom: var(--gs-space-2);
    color: var(--gs-color-text);
}

.woocommerce-billing-fields input.input-text,
.woocommerce-shipping-fields input.input-text,
.woocommerce-billing-fields select,
.woocommerce-shipping-fields select,
.woocommerce-checkout textarea {
    width: 100%;
    padding: var(--gs-space-3) var(--gs-space-4);
    border: 1.5px solid var(--gs-color-border-strong);
    border-radius: var(--gs-radius-md);
    font-size: var(--gs-text-sm);
    font-family: var(--gs-font-body);
    transition: border-color var(--gs-transition-fast);
}

.woocommerce-billing-fields input.input-text:focus,
.woocommerce-shipping-fields input.input-text:focus,
.woocommerce-billing-fields select:focus {
    border-color: var(--gs-color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.15);
}

.woocommerce-checkout #place_order {
    width: 100%;
    padding: var(--gs-space-4);
    font-size: var(--gs-text-base);
}

/* ═══════════════════════════════════════════════════════════
   MY ACCOUNT
═══════════════════════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 200px;
    flex-shrink: 0;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--gs-space-3) var(--gs-space-4);
    font-size: var(--gs-text-sm);
    font-weight: var(--gs-font-medium);
    color: var(--gs-color-text);
    border-radius: var(--gs-radius-md);
    text-decoration: none;
    transition: background var(--gs-transition-fast), color var(--gs-transition-fast);
}

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

/* Orders table */
.woocommerce-orders-table {
    width: 100%;
}

.woocommerce-orders-table th {
    font-size: var(--gs-text-xs);
    font-weight: var(--gs-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gs-color-text-muted);
    padding: var(--gs-space-3) var(--gs-space-4);
    border-bottom: 1px solid var(--gs-color-border);
    text-align: left;
}

.woocommerce-orders-table td {
    padding: var(--gs-space-4);
    font-size: var(--gs-text-sm);
    border-bottom: 1px solid var(--gs-color-border);
}

/* ═══════════════════════════════════════════════════════════
   WIDGETS (Sidebar filters)
═══════════════════════════════════════════════════════════ */
.widget_price_filter .price_slider_wrapper,
.widget_layered_nav ul,
.widget_product_categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget_layered_nav ul li,
.widget_product_categories ul li {
    padding: var(--gs-space-1) 0;
}

.widget_layered_nav ul li a,
.widget_product_categories ul li a {
    font-size: var(--gs-text-sm);
    color: var(--gs-color-text);
    text-decoration: none;
    transition: color var(--gs-transition-fast);
}

.widget_layered_nav ul li a:hover,
.widget_product_categories ul li a:hover {
    color: var(--gs-color-primary);
}

.widget_layered_nav_filters ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gs-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget_layered_nav_filters ul li a {
    display: inline-flex;
    align-items: center;
    gap: var(--gs-space-1);
    padding: var(--gs-space-1) var(--gs-space-3);
    background: var(--gs-color-primary-light);
    color: var(--gs-color-primary);
    border-radius: var(--gs-radius-full);
    font-size: var(--gs-text-xs);
    font-weight: var(--gs-font-medium);
    text-decoration: none;
}

/* Price slider */
.widget_price_filter .price_slider {
    margin-bottom: var(--gs-space-4);
}

.widget_price_filter .ui-slider-range {
    background: var(--gs-color-primary);
}

.widget_price_filter .ui-slider-handle {
    width: 18px;
    height: 18px;
    background: var(--gs-color-primary);
    border: 3px solid var(--gs-color-white);
    border-radius: var(--gs-radius-full);
    box-shadow: var(--gs-shadow-sm);
    top: -6px;
}

/* Widget headings */
.widget-title,
.woocommerce-widget-layered-nav-list__item {
    font-size: var(--gs-text-base);
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-text);
    margin-bottom: var(--gs-space-3);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES (WooCommerce)
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .single-product div.product {
        grid-template-columns: 1fr;
        gap: var(--gs-space-6);
    }

    .single-product div.product .woocommerce-product-gallery {
        position: static;
    }

    .cart_totals {
        max-width: 100%;
        margin-left: 0;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100%;
    }
}