/* ============================================================
   KAWAII TEDDY – WooCommerce Overrides
   ============================================================ */

/* ============================================================
   1. GENERAL WOOCOMMERCE RESETS
   ============================================================ */
.woocommerce-page .site-main,
.woocommerce .site-main {
    padding: 0;
}

/* WC default breadcrumb hidden – we handle our own */
.woocommerce-breadcrumb { display: none !important; }

/* Remove WC notices default styling – we restyle below */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--radius-md) !important;
    border: none !important;
    padding: var(--space-4) var(--space-5) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    margin-bottom: var(--space-5) !important;
}
.woocommerce-message {
    background: var(--color-light-green-3) !important;
    color: var(--color-text) !important;
}
.woocommerce-info {
    background: var(--color-light-blue-3) !important;
    color: var(--color-text) !important;
}
.woocommerce-error {
    background: #fde8e8 !important;
    color: var(--color-error) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
    display: none !important;
}

/* ============================================================
   2. PRICE FORMATTING
   ============================================================ */
.woocommerce-Price-amount bdi { font-weight: 700; }
.woocommerce del .woocommerce-Price-amount { color: var(--color-text-light); font-weight: 400; }
.woocommerce ins .woocommerce-Price-amount { color: var(--color-pink-dark); font-weight: 700; }

/* ============================================================
   3. BUTTONS (WC)
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.75rem;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-light-blue-2);
    background: var(--color-light-blue-2);
    color: var(--color-text);
    cursor: pointer;
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-fast),
        box-shadow var(--transition-base);
    text-decoration: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: #8FCDE6;
    border-color: #8FCDE6;
    color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-white);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--color-text-mid);
    border-color: var(--color-text-mid);
    color: var(--color-white);
}

/* ============================================================
   4. FORMS
   ============================================================ */
.woocommerce form .form-row label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    width: 100%;
    padding: 0.75rem var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    outline: none;
    border-color: var(--color-light-blue-2);
    box-shadow: 0 0 0 3px rgba(197,232,245,0.4);
}

/* ============================================================
   5. VARIATION FORM (WC default)
   ============================================================ */
.woocommerce-variation-add-to-cart {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

.woocommerce form.variations_form table.variations {
    width: auto;      /* shrinks to content → naturally left-aligned */
    min-width: 280px;
    border: none;
}
.woocommerce form.variations_form table.variations td,
.woocommerce form.variations_form table.variations th {
    padding: var(--space-3) 0;
    border: none;
    background: none;
}
.woocommerce form.variations_form table.variations td.label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    padding-right: var(--space-5);
    width: 120px;
}
.woocommerce form.variations_form table.variations td.value select {
    min-width: 160px;
    padding: 0.5rem var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A3728' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.woocommerce form.variations_form table.variations td.value select:focus {
    outline: none;
    border-color: var(--color-light-blue-2);
}

.woocommerce .reset_variations {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-decoration: underline;
    margin-left: var(--space-3);
}

/* ============================================================
   6. QUANTITY INPUT
   ============================================================ */
.woocommerce .quantity .qty {
    width: 60px;
    padding: 0.75rem var(--space-3);
    text-align: center;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 700;
    font-family: var(--font-family);
    color: var(--color-text);
}
.woocommerce .quantity .qty:focus {
    outline: none;
    border-color: var(--color-light-blue-2);
}

/* ============================================================
   6b. PDP MOBILE – variation form + ATC button
   ============================================================ */
@media (max-width: 768px) {

    /* Variation table: stack label + select vertically */
    .woocommerce form.variations_form table.variations,
    .woocommerce form.variations_form table.variations tbody,
    .woocommerce form.variations_form table.variations tr {
        display: block;
        width: 100%;
    }
    .woocommerce form.variations_form table.variations tr {
        margin-bottom: var(--space-3);
    }
    .woocommerce form.variations_form table.variations td.label {
        width: 100%;
        padding: 0 0 var(--space-1);
        font-size: var(--font-size-sm);
    }
    .woocommerce form.variations_form table.variations td.value {
        padding: 0;
        display: block;
        width: 100%;
    }
    .woocommerce form.variations_form table.variations td.value select {
        width: 100%;
        max-width: 100%;
        display: block;
        padding: 0.65rem var(--space-4);
        font-size: var(--font-size-sm);
    }

    /* Variation stock + price */
    .woocommerce-variation-add-to-cart {
        flex-direction: column;
        align-items: stretch;
    }
    .woocommerce-variation-add-to-cart .quantity { display: flex; }
    .woocommerce-variation-add-to-cart .single_add_to_cart_button {
        width: 100% !important;
        justify-content: center;
    }

    /* Simple product ATC: quantity + button full-width */
    .woocommerce form.cart:not(.variations_form) {
        display: flex;
        gap: var(--space-3);
        flex-wrap: nowrap;
        align-items: center;
    }
    .woocommerce form.cart:not(.variations_form) .single_add_to_cart_button {
        flex: 1;
        min-width: 0;
    }

    /* General single ATC button full width */
    .product-actions .single_add_to_cart_button {
        width: 100% !important;
        font-size: var(--font-size-sm) !important;
    }

    /* Qty input on mobile */
    .woocommerce .quantity .qty {
        width: 52px;
        padding: 0.65rem var(--space-2);
    }
}

/* ============================================================
   7. CART PAGE
   ============================================================ */
.woocommerce-cart .woocommerce { padding: var(--space-12) 0; }

.woocommerce-cart-form table.shop_table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.woocommerce-cart-form table.shop_table thead {
    background: var(--color-bg-section);
}
.woocommerce-cart-form table.shop_table th {
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
}
.woocommerce-cart-form table.shop_table td {
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}
.woocommerce-cart-form table.shop_table td.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
}
.woocommerce-cart-form table.shop_table td.product-name a {
    font-weight: 600;
    color: var(--color-text);
}
.woocommerce-cart-form table.shop_table td.product-name a:hover {
    color: var(--color-light-blue-2);
}

/* Cart totals */
.cart_totals h2 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-5);
}
.cart_totals .shop_table {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
}
.cart_totals .shop_table tr {
    border-bottom: 1px solid var(--color-border-light);
}
.cart_totals .shop_table tr:last-child { border-bottom: none; }
.cart_totals .shop_table th {
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-bg-section);
    width: 40%;
}
.cart_totals .shop_table td {
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.cart_totals .order-total td strong {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--color-text);
}

/* ============================================================
   8. CHECKOUT PAGE
   ============================================================ */
.woocommerce-checkout .woocommerce { padding: var(--space-12) 0; }

.woocommerce-checkout h3,
.woocommerce-checkout h2 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-border-light);
}

.woocommerce #payment .payment_methods {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-5);
}
.woocommerce #payment .payment_methods li {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.woocommerce #payment .payment_methods li:last-child { border-bottom: none; }

/* ============================================================
   9. MY ACCOUNT PAGE
   ============================================================ */
.woocommerce-account .woocommerce { padding: var(--space-12) 0; }

.woocommerce-MyAccount-navigation {
    background: var(--color-bg-section);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}
.woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
    text-decoration: none;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--color-light-blue-3);
    border-color: var(--color-light-blue-2);
    color: var(--color-text);
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-5);
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border-light);
}

/* ============================================================
   10. PRODUCT ARCHIVE – WC DEFAULT OVERRIDES
   ============================================================ */
/* Remove default WC columns classes */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
    float: none !important;
    width: auto !important;
    clear: none !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

/* Default WC product cards in loop */
.woocommerce ul.products li.product a img {
    margin-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--space-3) var(--space-4) var(--space-1);
}
.woocommerce ul.products li.product .price {
    padding: 0 var(--space-4) var(--space-4);
    font-weight: 700;
    font-size: var(--font-size-sm);
}
.woocommerce ul.products li.product .button {
    margin: 0 var(--space-4) var(--space-4);
}

/* ============================================================
   11. SINGLE PRODUCT – WC DEFAULT OVERRIDES
   ============================================================ */
.single-product .product {
    display: block !important;
}

/* WooCommerce sale badge */
.woocommerce span.onsale {
    background: var(--color-pink) !important;
    color: var(--color-text) !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    min-width: auto !important;
    min-height: auto !important;
    line-height: 1.5 !important;
    top: var(--space-3) !important;
    left: var(--space-3) !important;
    z-index: 2 !important;
}

/* WC star ratings */
.woocommerce .star-rating {
    color: var(--color-warning);
    font-size: 0.875rem;
}
.woocommerce .star-rating::before {
    color: var(--color-border);
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li .comment_container {
    padding: var(--space-5);
    background: var(--color-bg-section);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    margin-bottom: var(--space-4);
}
.woocommerce #review_form #respond { margin-top: var(--space-8); }
.woocommerce #review_form #respond .comment-reply-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-5);
}

/* ============================================================
   12. FILTER WIDGETS
   ============================================================ */
/* Price filter */
.widget_price_filter .price_slider_wrapper {
    padding: var(--space-3) 0;
}
.widget_price_filter .ui-slider {
    background: var(--color-border);
    border-radius: var(--radius-full);
    height: 4px;
}
.widget_price_filter .ui-slider .ui-slider-range {
    background: var(--color-light-blue-2);
    border-radius: var(--radius-full);
}
.widget_price_filter .ui-slider .ui-slider-handle {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    border: 3px solid var(--color-light-blue-2);
    top: -7px;
    cursor: grab;
    box-shadow: var(--shadow-sm);
}
.widget_price_filter .price_label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-mid);
    margin-top: var(--space-3);
}
.widget_price_filter .price_slider_amount .button {
    float: right;
    font-size: var(--font-size-xs) !important;
    padding: var(--space-2) var(--space-4) !important;
}

/* ============================================================
   FILTER SIDEBAR – Category & Attribute Lists
   ============================================================ */

/* Strip all bullets, padding, margins from every list in the filter panel */
.shop-filters-panel ul,
.shop-filters-panel ol,
.shop-filters-panel .product-categories,
.shop-filters-panel .woocommerce-widget-layered-nav-list,
.shop-filters-panel .children {
    list-style:   none !important;
    margin:       0    !important;
    padding:      0    !important;
}

/* Each list item = a full-width row (flex) so link + count sit side-by-side */
.product-categories li,
.woocommerce-widget-layered-nav-list__item {
    list-style:  none !important;
    display:     flex !important;
    align-items: center;
    gap:         var(--space-2);
    border-radius: var(--radius-sm);
    transition:  background var(--transition-fast);
    margin-bottom: 2px;
}
.product-categories li:hover,
.woocommerce-widget-layered-nav-list__item:hover {
    background: var(--color-light-blue-3);
}
.product-categories li.current-cat,
.woocommerce-widget-layered-nav-list__item--chosen {
    background: var(--color-light-blue-3);
}

/* The link fills available space; truncate long names with ellipsis */
.product-categories li a,
.woocommerce-widget-layered-nav-list__item a {
    flex:            1;
    min-width:       0;          /* allow shrink for ellipsis to work */
    display:         block;
    padding:         6px 10px;
    font-size:       var(--font-size-sm);
    font-weight:     500;
    color:           var(--color-text-mid);
    text-decoration: none;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    background:      transparent;
    border-radius:   var(--radius-sm);
    transition:      color var(--transition-fast);
}
.product-categories li a:hover,
.woocommerce-widget-layered-nav-list__item a:hover,
.product-categories li.current-cat > a,
.woocommerce-widget-layered-nav-list__item--chosen a {
    color: var(--color-light-blue-2);
    background: transparent;
}

/* Count badge – sits to the right, never shrinks */
.product-categories li .count,
.woocommerce-widget-layered-nav-list__item .count {
    flex-shrink:    0;
    font-size:      11px;
    font-weight:    600;
    color:          var(--color-text-light);
    background:     var(--color-border-light);
    padding:        1px 7px;
    border-radius:  var(--radius-full);
    margin-right:   6px;
    white-space:    nowrap;
    /* wp_list_categories wraps count in (N) — strip the parentheses via CSS */
}
/* Hide the parentheses WordPress adds around the count */
.product-categories li .count {
    /* count text is "(N)" – can't remove parens via CSS, but styling makes it look fine */
}

/* Sub-categories indented slightly */
.product-categories .children {
    margin-left: 12px !important;
}

/* Rating filter */
.woocommerce-widget-layered-nav--rating .woocommerce-widget-layered-nav-list__item a {
    align-items: center;
    white-space: nowrap;
}

/* ============================================================
   13. MOBILE OVERFLOW PROTECTION
   Prevent any WooCommerce table from escaping the viewport
   ============================================================ */
@media (max-width: 768px) {
    /* Scrollable wrapper for multi-column WC tables */
    .woocommerce-cart-form,
    .woocommerce-account .woocommerce-orders-table,
    .woocommerce table.shop_table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        display: block;
    }
    /* Prevent the cart form table from overflowing */
    .woocommerce-cart-form table.shop_table {
        min-width: 480px; /* let it scroll horizontally rather than compress badly */
    }
    /* Account orders table */
    .woocommerce-account .woocommerce-orders-table table {
        min-width: 400px;
    }
    /* General WooCommerce max-width guard */
    .woocommerce,
    .woocommerce-page {
        max-width: 100%;
        overflow-x: hidden;
    }
}