/**
 * WooCommerce custom styles — full override.
 *
 * @package WB_Developer_Theme
 */

/* ==========================================================================
   SHOP ARCHIVE / TOOLBAR
   ========================================================================== */

.wb-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-gray-light);
}

.wb-shop-result-count .woocommerce-result-count {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.wb-shop-ordering .woocommerce-ordering select {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    color: var(--color-text-primary);
    cursor: pointer;
}

/* ==========================================================================
   BOOKS FILTER BAR
   ========================================================================== */

.wb-books-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    justify-content: center;
}

.wb-filter-btn {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: var(--color-white);
    transition: all var(--transition-fast);
}

.wb-filter-btn:hover,
.wb-filter-btn.active {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
}

/* ==========================================================================
   BOOK CARD (content-product.php)
   ========================================================================== */

.wb-book-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.wb-book-card:hover {
    transform: translateY(-0.3vw);
    box-shadow: var(--shadow-lg);
}

.wb-book-card-image {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.wb-book-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.wb-book-card:hover .wb-book-card-image img {
    transform: scale(1.05);
}

.wb-book-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.wb-book-badge {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: clamp(2px, 0.2vw, 4px) clamp(6px, 0.5vw, 10px);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    z-index: 2;
}

.wb-book-badge-sale {
    background-color: var(--color-cta-primary);
    color: var(--color-white);
}

.wb-book-card .wb-card-body {
    padding: var(--spacing-sm) var(--spacing-md);
}

.wb-book-card-title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

.wb-book-card-title a {
    color: var(--color-text-primary);
    transition: color var(--transition-fast);
}

.wb-book-card-title a:hover {
    color: var(--color-gold);
}

.wb-book-card-price {
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-green);
    margin-bottom: var(--spacing-sm);
}

.wb-book-card-price del {
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: var(--text-sm);
}

.wb-book-card-price ins {
    text-decoration: none;
}

.wb-book-card-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

/* ==========================================================================
   SINGLE PRODUCT PAGE
   ========================================================================== */

.wb-single-product-no-hero {
    padding-top: calc(var(--header-height) + var(--spacing-lg)) !important;
}

.wb-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
    margin-bottom: var(--spacing-xl);
}

/* --- Gallery --- */
.wb-product-gallery {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-md));
    max-width: clamp(300px, 28vw, 450px);
}

/* Carousel */
.wb-gallery-carousel {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-ivory);
    margin-bottom: var(--spacing-sm);
    width: 100%;
}

.wb-gallery-viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.wb-gallery-track {
    display: flex;
    width: 100%;
    will-change: transform;
}

.wb-gallery-slide {
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
}

.wb-gallery-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: contain;
}

/* Arrows */
.wb-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(32px, 2.5vw, 44px);
    height: clamp(32px, 2.5vw, 44px);
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    opacity: 0;
    z-index: 2;
}

.wb-gallery-carousel:hover .wb-gallery-arrow {
    opacity: 1;
}

.wb-gallery-arrow:hover {
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.wb-gallery-prev {
    left: var(--spacing-sm);
}

.wb-gallery-next {
    right: var(--spacing-sm);
}

.wb-gallery-arrow svg {
    width: clamp(16px, 1.2vw, 22px);
    height: clamp(16px, 1.2vw, 22px);
}

/* Dots */
.wb-gallery-dots {
    position: absolute;
    bottom: var(--spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-xs);
    z-index: 2;
}

.wb-gallery-dot {
    width: clamp(8px, 0.6vw, 10px);
    height: clamp(8px, 0.6vw, 10px);
    border-radius: var(--radius-full);
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition: all var(--transition-fast);
}

.wb-gallery-dot.active {
    background-color: var(--color-white);
    transform: scale(1.3);
}

.wb-gallery-dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* Thumbnails */
.wb-product-thumbnails {
    display: flex;
    gap: var(--spacing-xs);
}

.wb-product-thumb {
    width: clamp(50px, 5vw, 80px);
    height: clamp(50px, 5vw, 80px);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color var(--transition-fast);
}

.wb-product-thumb.active,
.wb-product-thumb:hover {
    border-color: var(--color-gold);
}

.wb-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Product Info --- */
.wb-product-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.wb-product-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
    margin: 0;
}

.wb-product-price {
    font-family: var(--font-accent);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-green);
    margin-bottom: var(--spacing-md);
}

.wb-product-price del {
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: var(--text-md);
}

.wb-product-price ins {
    text-decoration: none;
}

/* --- Format Selector --- */
.wb-product-formats {
    margin-bottom: var(--spacing-md);
}

.wb-product-formats-label {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wb-format-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.wb-format-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    padding: var(--spacing-sm);
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.wb-format-card:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
}

.wb-format-card.active {
    border-color: var(--color-cta-primary);
    background-color: var(--color-cream);
    box-shadow: 0 0 0 1px var(--color-cta-primary);
}

.wb-format-card.active::after {
    content: '';
    position: absolute;
    top: clamp(6px, 0.5vw, 10px);
    right: clamp(6px, 0.5vw, 10px);
    width: clamp(20px, 1.5vw, 26px);
    height: clamp(20px, 1.5vw, 26px);
    background-color: var(--color-cta-primary);
    border-radius: var(--radius-full);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;
}

.wb-format-card input[type="radio"] {
    display: none;
}

.wb-format-card-radio {
    width: clamp(16px, 1.2vw, 20px);
    height: clamp(16px, 1.2vw, 20px);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    position: relative;
    transition: all var(--transition-fast);
}

.wb-format-card.active .wb-format-card-radio {
    border-color: var(--color-cta-primary);
}

.wb-format-card.active .wb-format-card-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(8px, 0.6vw, 10px);
    height: clamp(8px, 0.6vw, 10px);
    background-color: var(--color-cta-primary);
    border-radius: var(--radius-full);
}

.wb-format-card-icon {
    width: clamp(28px, 2.2vw, 36px);
    height: clamp(28px, 2.2vw, 36px);
    flex-shrink: 0;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.wb-format-card.active .wb-format-card-icon {
    color: var(--color-cta-primary);
}

.wb-format-card-icon svg {
    width: 100%;
    height: 100%;
}

.wb-format-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.15vw;
}

.wb-format-card-name {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.wb-format-card-price {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-green);
}

.wb-format-card-price del {
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: var(--text-xs);
}

.wb-format-card-price ins {
    text-decoration: none;
}

/* Hide default WooCommerce variation table & redundant price — our format selector handles it */
.wb-product-add-to-cart .variations,
.wb-product-add-to-cart .reset_variations,
.wb-product-add-to-cart .woocommerce-variation-price {
    display: none !important;
}

/* Hide express payment buttons on product pages */
.single-product .wc-block-components-express-payment,
.single-product #wc-stripe-payment-request-wrapper,
.single-product .payment-request-button-wrapper,
.single-product #wc-stripe-payment-request-button-separator,
.single-product .wc_stripe_payment_request_button_wrapper,
.single-product .stripe-payment-request-wrapper,
.single-product #wc-stripe-express-checkout-element,
.single-product .wc-stripe-express-checkout-element,
.wb-product-add-to-cart .wc-block-components-express-payment,
.wb-product-add-to-cart #wc-stripe-payment-request-wrapper,
.wb-product-add-to-cart .payment-request-button-wrapper,
.wb-product-add-to-cart #wc-stripe-express-checkout-element,
.wb-product-add-to-cart .wc-stripe-express-checkout-element,
.wb-product-add-to-cart ul.wc_stripe_payment_request_button,
form.cart .wc-stripe-payment-request-wrapper,
form.cart #wc-stripe-payment-request-wrapper,
form.cart #wc-stripe-express-checkout-element,
form.cart .wc-stripe-express-checkout-element,
.wc-block-cart__payment-options,
.wc-block-cart .wc-block-components-express-payment,
.wc-block-cart #wc-stripe-express-checkout-element,
.wc-block-cart .wc-stripe-express-checkout-element,
.woocommerce-cart .wc-block-components-express-payment {
    display: none !important;
}

/* Clean up add-to-cart area */
.wb-product-add-to-cart .woocommerce-variation-add-to-cart,
.wb-product-add-to-cart form.cart:not(.variations_form) {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.wb-product-add-to-cart .quantity,
.wb-qty-wrapper {
    display: flex !important;
    align-items: center !important;
    border: 2px solid var(--color-text-secondary) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background-color: var(--color-white) !important;
    transition: border-color var(--transition-fast) !important;
}

.wb-product-add-to-cart .quantity:focus-within,
.wb-qty-wrapper:focus-within {
    border-color: var(--color-cta-primary) !important;
}

.wb-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 2.5vw, 40px);
    height: clamp(32px, 2.5vw, 40px);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    padding: 0;
    line-height: 1;
    user-select: none;
}

.wb-qty-btn:hover {
    background-color: var(--color-ivory);
    color: var(--color-text-primary);
}

.wb-product-add-to-cart .quantity input,
.wb-product-add-to-cart .quantity input[type="number"] {
    width: clamp(32px, 2.5vw, 44px) !important;
    text-align: center !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: var(--text-base) !important;
    font-family: var(--font-accent) !important;
    font-weight: 600 !important;
    background-color: transparent !important;
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none !important;
}

.wb-product-add-to-cart .quantity input::-webkit-inner-spin-button,
.wb-product-add-to-cart .quantity input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wb-product-add-to-cart .single_add_to_cart_button,
.wb-product-add-to-cart .woocommerce-variation-add-to-cart .button {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-accent);
    font-size: var(--text-base);
    font-weight: 600;
    background-color: var(--color-cta-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    text-align: center;
}

.wb-product-add-to-cart .single_add_to_cart_button:hover,
.wb-product-add-to-cart .woocommerce-variation-add-to-cart .button:hover {
    background-color: var(--color-cta-hover);
}

.wb-product-add-to-cart .single_add_to_cart_button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Add to Cart --- */
.wb-product-add-to-cart {
    margin-bottom: var(--spacing-md);
}

.wb-product-add-to-cart .quantity {
    display: inline-flex;
    align-items: center;
    margin-right: var(--spacing-xs);
}

.wb-product-add-to-cart .quantity .qty {
    width: clamp(50px, 4vw, 70px);
    text-align: center;
    font-size: var(--text-base);
    padding: var(--spacing-xs);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
}

.wb-product-add-to-cart .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: var(--text-base);
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-cta-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.wb-product-add-to-cart .single_add_to_cart_button:hover {
    background-color: var(--color-cta-hover);
}

/* --- Meta Details --- */
.wb-product-meta-details {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--color-gray-light);
}

.wb-meta-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    font-size: var(--text-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.wb-meta-row:last-child {
    border-bottom: none;
}

.wb-meta-label {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.wb-meta-value {
    color: var(--color-text-primary);
}

.wb-meta-value a {
    color: var(--color-link);
}

.wb-meta-value a:hover {
    color: var(--color-link-hover);
}

/* --- External Links --- */
.wb-product-links {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

/* --- Tabs --- */
.wb-product-tabs {
    margin-bottom: var(--spacing-xl);
}

.wb-tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-gray-light);
    margin-bottom: var(--spacing-md);
}

.wb-tab-btn {
    font-family: var(--font-accent);
    font-size: var(--text-base);
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.wb-tab-btn:hover {
    color: var(--color-text-primary);
}

.wb-tab-btn.active {
    color: var(--color-green);
    border-bottom-color: var(--color-green);
}

.wb-tab-panel {
    display: none;
}

.wb-tab-panel.active {
    display: block;
}

.wb-product-description {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-primary);
}

/* --- Related Products --- */
.wb-related-products {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-light);
}

.wb-related-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/* ==========================================================================
   CART PAGE
   ========================================================================== */

.wb-cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-lg);
    align-items: start;
}

.wb-cart-header-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 40px;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 2px solid var(--color-gray-light);
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wb-cart-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 40px;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-gray-light);
}

.wb-cart-col-product {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.wb-cart-product-thumb {
    width: clamp(60px, 5vw, 90px);
    flex-shrink: 0;
}

.wb-cart-product-thumb img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.wb-cart-product-name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0;
}

.wb-cart-product-name a {
    color: var(--color-text-primary);
}

.wb-cart-product-name a:hover {
    color: var(--color-gold);
}

.wb-cart-col-price,
.wb-cart-col-subtotal {
    font-size: var(--text-base);
    font-weight: 500;
}

.wb-cart-col-qty .quantity .qty {
    width: clamp(45px, 3.5vw, 60px);
    text-align: center;
    font-size: var(--text-sm);
    padding: var(--spacing-xs);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
}

.wb-cart-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2vw, 36px);
    height: clamp(28px, 2vw, 36px);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.wb-cart-remove:hover {
    color: var(--color-error);
    background-color: rgba(184, 50, 50, 0.1);
}

/* --- Cart Actions --- */
.wb-cart-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    justify-content: space-between;
}

.wb-coupon-form {
    display: flex;
    gap: var(--spacing-xs);
}

.wb-coupon-form .wb-input {
    width: clamp(140px, 12vw, 200px);
    font-size: var(--text-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
}

/* --- Cart Totals Sidebar --- */
.wb-cart-totals {
    background-color: var(--color-ivory);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-md));
}

.wb-cart-totals-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-gray-light);
}

.wb-totals-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    font-size: var(--text-base);
}

.wb-totals-label {
    color: var(--color-text-secondary);
}

.wb-totals-value {
    font-weight: 600;
    color: var(--color-text-primary);
}

.wb-totals-total {
    border-top: 2px solid var(--color-green-dark);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
}

.wb-totals-total .wb-totals-label {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
}

.wb-totals-total .wb-totals-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-green);
}

.wb-cart-checkout-btn {
    margin-top: var(--spacing-md);
}

.wb-cart-checkout-btn .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: var(--text-base);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-cta-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.wb-cart-checkout-btn .checkout-button:hover {
    background-color: var(--color-cta-hover);
}

/* ==========================================================================
   MINI CART (Header Dropdown)
   ========================================================================== */

.wb-mini-cart-items {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.wb-mini-cart-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-gray-light);
    position: relative;
}

.wb-mini-cart-remove {
    position: absolute;
    top: var(--spacing-xs);
    right: 0;
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    line-height: 1;
}

.wb-mini-cart-remove:hover {
    color: var(--color-error);
}

.wb-mini-cart-thumb {
    width: clamp(40px, 3vw, 55px);
    flex-shrink: 0;
}

.wb-mini-cart-thumb img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.wb-mini-cart-name {
    font-size: var(--text-sm);
    font-weight: 500;
    display: block;
}

.wb-mini-cart-name a {
    color: var(--color-text-primary);
}

.wb-mini-cart-qty {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    display: block;
}

.wb-mini-cart-footer {
    padding-top: var(--spacing-sm);
}

.wb-mini-cart-total {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-base);
    margin-bottom: var(--spacing-sm);
}

.wb-mini-cart-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

.wb-mini-cart-buttons .wb-btn {
    flex: 1;
    text-align: center;
}

.wb-mini-cart-empty {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ==========================================================================
   CHECKOUT PAGE
   ========================================================================== */

.wb-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.wb-checkout-section {
    margin-bottom: var(--spacing-lg);
}

.wb-checkout-section-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-green);
}

/* --- WooCommerce form fields --- */
.woocommerce-checkout .form-row {
    margin-bottom: var(--spacing-sm);
}

.woocommerce-checkout .form-row label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    display: block;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--spacing-sm);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast);
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    outline: none;
    border-color: var(--color-green);
    box-shadow: 0 0 0 0.15vw rgba(45, 106, 63, 0.15);
}

.woocommerce-checkout .form-row .required {
    color: var(--color-error);
}

/* --- Order Review on Checkout --- */
.wb-checkout-order-review {
    background-color: var(--color-ivory);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-md));
}

.wb-order-review-header {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-gray-light);
    margin-bottom: var(--spacing-xs);
}

.wb-order-review-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: var(--text-sm);
}

.wb-order-item-name {
    flex: 1;
    color: var(--color-text-primary);
}

.wb-order-item-qty {
    color: var(--color-text-secondary);
    margin-left: var(--spacing-xs);
}

.wb-order-item-total {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    margin-left: var(--spacing-sm);
}

.wb-order-review-totals {
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.wb-order-total-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    font-size: var(--text-base);
}

.wb-order-grand-total {
    border-top: 2px solid var(--color-green-dark);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: 700;
}

.wb-order-grand-total span:last-child {
    color: var(--color-green);
}

/* --- Payment Methods --- */
.wb-payment-methods {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-gray-light);
}

.wb-payment-methods h4 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.wb-payment-methods .wc_payment_methods {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wb-payment-methods .wc_payment_method {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
}

.wb-payment-methods .wc_payment_method label {
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
}

.wb-payment-methods .payment_box {
    padding: var(--spacing-sm) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* --- Place Order --- */
.wb-place-order {
    margin-top: var(--spacing-md);
}

.wb-btn-full {
    width: 100%;
}

/* Place Order & Proceed to Checkout — ensure styled */
#place_order,
.wb-place-order button,
.wb-place-order .button,
.checkout-button,
.wb-cart-checkout-btn .checkout-button,
.woocommerce #place_order,
.woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
.wc-block-cart__submit-button,
.wc-block-cart__submit-container a,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-family: var(--font-accent) !important;
    font-weight: 600 !important;
    font-size: var(--text-base) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    background-color: var(--color-cta-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast) !important;
    text-decoration: none !important;
}

#place_order:hover,
.wb-place-order button:hover,
.wb-place-order .button:hover,
.checkout-button:hover,
.wb-cart-checkout-btn .checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container a:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
    background-color: var(--color-cta-hover) !important;
    color: var(--color-white) !important;
}

/* Checkout actions row — Return to Cart + Place Order */
.wc-block-checkout__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
}

.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions .wc-block-components-button {
    flex: 1 !important;
    display: block !important;
    width: auto !important;
}

.wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-xs) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-accent) !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    background: var(--color-bg-secondary) !important;
    border-radius: var(--radius-md) !important;
    justify-content: center !important;
    transition: background var(--transition-fast) !important;
}

.wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button:hover {
    background: var(--color-gray-light) !important;
    color: var(--color-cta-primary) !important;
}

/* ==========================================================================
   WC PAGES (CART / CHECKOUT / ACCOUNT) — no hero banner
   ========================================================================== */

.wb-wc-page {
    padding-top: calc(var(--header-height) + var(--spacing-lg)) !important;
}

.wb-wc-page-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-account:not(.logged-in) .wb-wc-page-title {
    text-align: center;
    border-bottom: none;
}

/* Hide WC Blocks JS error messages rendered as text */
.wc-block-components-notice-banner.is-error,
.wc-block-cart .wc-block-components-notices {
    display: none !important;
}

/* ==========================================================================
   THANK YOU PAGE
   ========================================================================== */

/* Hide the "Checkout" page title on order-received / thank-you page */
.woocommerce-order-received .wp-block-post-title,
.woocommerce-order-received .entry-title,
.woocommerce-order-received .page-title,
body.woocommerce-order-received .wb-wc-page-title,
.woocommerce-order-received .wc-block-checkout > h1,
.woocommerce-order-received h1.wp-block-post-title {
    display: none !important;
}

/* Also hide it for non-body-class detection (URL-based) */
.woocommerce-checkout .woocommerce-order .entry-title {
    display: none !important;
}

/* Center the thank you content */
.woocommerce-order-received .entry-content,
.woocommerce-order-received .woocommerce,
.woocommerce-order-received .is-layout-constrained {
    max-width: clamp(600px, 55vw, 800px) !important;
    margin: 0 auto !important;
    padding-top: var(--spacing-sm) !important;
}

/* Style the order details table */
.woocommerce-order-received .woocommerce-table--order-details,
.woocommerce-order-received .wc-block-order-confirmation-summary,
.woocommerce-order-received table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.woocommerce-order-received .woocommerce-table--order-details td,
.woocommerce-order-received .woocommerce-table--order-details th {
    padding: clamp(8px, 0.8vw, 12px) clamp(12px, 1vw, 16px) !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-size: var(--text-sm) !important;
}

/* Style the "Order details" heading */
.woocommerce-order-received h2 {
    font-family: var(--font-heading) !important;
    font-size: var(--text-lg) !important;
    font-weight: 700 !important;
    color: var(--color-text-primary) !important;
    margin-top: var(--spacing-md) !important;
    margin-bottom: var(--spacing-sm) !important;
    text-align: center !important;
}

.wb-thankyou {
    text-align: center;
    max-width: 60vw;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

.wb-thankyou-icon {
    color: var(--color-success);
    margin-bottom: var(--spacing-md);
}

.wb-thankyou-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.wb-thankyou-message {
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.wb-thankyou-failed {
    color: var(--color-error);
}

.wb-order-overview {
    margin-top: var(--spacing-lg);
    text-align: left;
}

.wb-order-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-sm);
    background-color: var(--color-ivory);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.wb-order-overview-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wb-overview-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.wb-overview-value {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ==========================================================================
   FORM PAY
   ========================================================================== */

.wb-form-pay {
    max-width: 50vw;
    margin: 0 auto;
}

.wb-form-pay-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   WOOCOMMERCE NOTICES / MESSAGES
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: clamp(36px, 3vw, 48px);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.5;
    list-style: none;
    position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: absolute !important;
    left: var(--spacing-sm) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.woocommerce-message {
    background-color: rgba(45, 106, 63, 0.1);
    border-left: 4px solid var(--color-success);
    color: var(--color-green-dark);
}

.woocommerce-info {
    background-color: rgba(200, 144, 46, 0.1);
    border-left: 4px solid var(--color-gold);
    color: var(--color-gold-dark);
}

.woocommerce-error {
    background-color: rgba(184, 50, 50, 0.1);
    border-left: 4px solid var(--color-error);
    color: var(--color-error);
}

.woocommerce-error li {
    list-style: none;
}

/* ==========================================================================
   WOOCOMMERCE GENERAL OVERRIDES
   ========================================================================== */

/* Hide default WooCommerce breadcrumbs — we use page-header */
.woocommerce-breadcrumb {
    display: none;
}

/* Star ratings */
.star-rating {
    display: inline-flex;
    font-size: var(--text-sm);
    color: var(--color-gold);
}

/* Quantity inputs */
.woocommerce .quantity .qty {
    font-family: var(--font-body);
}

/* Sale flash override (hide default, we use our own) */
.woocommerce span.onsale {
    display: none;
}

/* Price styling */
.woocommerce .price {
    font-family: var(--font-accent);
}

/* Hide default WooCommerce dashboard greeting */
.woocommerce-MyAccount-content > p:first-child {
    display: none;
}

/* Account pages */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 25%;
    float: left;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: var(--spacing-xs);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

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

.woocommerce-account .woocommerce-MyAccount-content {
    width: 73%;
    float: right;
}

/* Clearfix for account layout */
.woocommerce-account .woocommerce::after {
    content: '';
    display: table;
    clear: both;
}

/* --- Shop pagination override --- */
.wb-shop-pagination .woocommerce-pagination {
    text-align: center;
}

.wb-shop-pagination .woocommerce-pagination ul {
    display: inline-flex;
    gap: var(--spacing-xs);
    list-style: none;
    padding: 0;
}

.wb-shop-pagination .woocommerce-pagination ul li a,
.wb-shop-pagination .woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 2.5vw, 40px);
    height: clamp(32px, 2.5vw, 40px);
    font-size: var(--text-sm);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.wb-shop-pagination .woocommerce-pagination ul li a:hover,
.wb-shop-pagination .woocommerce-pagination ul li span.current {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
}

/* ==========================================================================
   AJAX SPINNER & NOTICES
   ========================================================================== */

.wb-spinner {
    display: inline-block;
    width: clamp(14px, 1.1vw, 18px);
    height: clamp(14px, 1.1vw, 18px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: wb-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes wb-spin {
    to { transform: rotate(360deg); }
}

.wb-ajax-notice {
    animation: wb-fadeIn 0.3s ease;
}

@keyframes wb-fadeIn {
    from { opacity: 0; transform: translateY(-0.5vw); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   ADD-TO-CART POPUP
   ========================================================================== */

.wb-cart-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: wb-fadeIn 0.2s ease;
}

.wb-cart-popup {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    max-width: clamp(320px, 28vw, 440px);
    width: 90vw;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: wb-popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wb-popIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.wb-cart-popup-icon {
    width: clamp(48px, 4vw, 64px);
    height: clamp(48px, 4vw, 64px);
    margin: 0 auto var(--spacing-sm);
    color: var(--color-success, var(--color-green));
}

.wb-cart-popup-icon svg {
    width: 100%;
    height: 100%;
}

.wb-cart-popup-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.wb-cart-popup-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.wb-cart-popup-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.wb-cart-popup-actions .wb-btn {
    width: 100%;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTH — Login / Register Page
   ══════════════════════════════════════════════════════════════════════════ */

.wb-auth {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: var(--spacing-lg) var(--spacing-md);
    overflow-y: auto;
}

.wb-auth-card {
    width: 100%;
    max-width: clamp(380px, 30vw, 480px);
    margin-top: auto;
    margin-bottom: auto;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 clamp(4px, 0.5vw, 10px) clamp(20px, 2.5vw, 50px) rgba(59, 36, 21, 0.08),
                0 clamp(1px, 0.1vw, 2px) clamp(3px, 0.3vw, 6px) rgba(59, 36, 21, 0.04);
    padding: clamp(28px, 2.5vw, 48px);
}

/* Logo */
.wb-auth-logo {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.wb-auth-logo__img {
    height: clamp(40px, 3.5vw, 65px);
    width: auto;
    object-fit: contain;
}

.wb-auth-logo__text {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--color-brown-dark);
    margin: 0;
}

/* Tab Switcher */
.wb-auth-tabs {
    display: flex;
    position: relative;
    background: var(--color-ivory);
    border-radius: var(--radius-md);
    padding: clamp(3px, 0.25vw, 5px);
    margin-bottom: var(--spacing-md);
}

.wb-auth-tab {
    flex: 1;
    padding: clamp(8px, 0.7vw, 12px) clamp(12px, 1vw, 20px);
    background: none;
    border: none;
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color var(--transition-fast);
    border-radius: calc(var(--radius-md) - 2px);
}

.wb-auth-tab.active {
    color: var(--color-brown-dark);
}

.wb-auth-tab-indicator {
    position: absolute;
    top: clamp(3px, 0.25vw, 5px);
    height: calc(100% - clamp(6px, 0.5vw, 10px));
    background: var(--color-white);
    border-radius: calc(var(--radius-md) - 2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 1;
    transition: left 0.3s ease, width 0.3s ease;
}

/* Panels */
.wb-auth-panel {
    display: none;
}

.wb-auth-panel.active {
    display: block;
}

/* Form Fields */
.wb-auth-field {
    margin-bottom: var(--spacing-sm);
}

.wb-auth-field label {
    display: block;
    font-family: var(--font-accent);
    font-size: clamp(11px, 0.8vw, 13px);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: clamp(4px, 0.3vw, 6px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wb-auth-input-wrap {
    display: flex;
    align-items: center;
    position: relative;
    background: var(--color-ivory);
    border: clamp(1px, 0.1vw, 2px) solid var(--color-gray-light);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wb-auth-input-wrap.focused {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 clamp(2px, 0.2vw, 4px) rgba(200, 144, 46, 0.15);
}

.wb-auth-input-icon {
    width: clamp(16px, 1.2vw, 20px);
    height: clamp(16px, 1.2vw, 20px);
    margin-left: clamp(10px, 0.9vw, 14px);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    opacity: 0.5;
}

.wb-auth-input-wrap.focused .wb-auth-input-icon {
    opacity: 1;
    color: var(--color-gold);
}

.wb-auth-input-wrap input {
    flex: 1;
    border: none;
    background: none;
    padding: clamp(10px, 0.8vw, 14px) clamp(8px, 0.7vw, 12px);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    outline: none;
    width: 100%;
}

.wb-auth-input-wrap input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.5;
}

/* Password toggle */
.wb-auth-toggle-pw {
    background: none;
    border: none;
    cursor: pointer;
    padding: clamp(6px, 0.5vw, 10px);
    margin-right: clamp(4px, 0.3vw, 8px);
    color: var(--color-text-secondary);
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.wb-auth-toggle-pw:hover {
    opacity: 1;
}

.wb-auth-toggle-pw svg {
    width: clamp(16px, 1.2vw, 20px);
    height: clamp(16px, 1.2vw, 20px);
    display: block;
}

/* Row: Remember + Forgot */
.wb-auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.wb-auth-checkbox {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.4vw, 8px);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wb-auth-checkbox input {
    accent-color: var(--color-gold);
}

.wb-auth-forgot {
    font-size: var(--text-sm);
    color: var(--color-gold-dark);
    text-decoration: none;
    font-weight: 500;
}

.wb-auth-forgot:hover {
    color: var(--color-gold);
    text-decoration: underline;
}

/* Two-column name fields */
.wb-auth-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

/* Submit Button */
.wb-auth-submit {
    width: 100%;
    height: clamp(44px, 3.5vw, 54px);
    padding: 0 clamp(12px, 1vw, 16px);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-auth-submit__text {
    transition: opacity 0.2s ease;
}

.wb-auth-submit.loading .wb-auth-submit__text {
    opacity: 0;
}

.wb-auth-submit__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(18px, 1.4vw, 24px);
    height: clamp(18px, 1.4vw, 24px);
    margin-top: clamp(-9px, -0.7vw, -12px);
    margin-left: clamp(-9px, -0.7vw, -12px);
    border: clamp(2px, 0.15vw, 3px) solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-white);
    border-radius: 50%;
    opacity: 0;
    animation: none;
    pointer-events: none;
}

.wb-auth-submit.loading .wb-auth-submit__loader {
    opacity: 1;
    animation: wb-auth-spin 0.6s linear infinite;
}

@keyframes wb-auth-spin {
    to { transform: rotate(360deg); }
}

/* Messages */
.wb-auth-message {
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: center;
    padding: 0;
    margin-bottom: var(--spacing-xs);
    min-height: 1.4em;
}

.wb-auth-message.error {
    color: var(--color-error);
}

.wb-auth-message.success {
    color: var(--color-success);
}

/* Password Strength */
.wb-password-strength {
    margin-top: clamp(4px, 0.3vw, 6px);
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.5vw, 10px);
}

.wb-strength-bar {
    flex: 1;
    height: clamp(3px, 0.25vw, 5px);
    background: var(--color-gray-light);
    border-radius: 99px;
    overflow: hidden;
}

.wb-strength-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.wb-strength-fill.weak { background-color: var(--color-error); }
.wb-strength-fill.medium { background-color: var(--color-warning); }
.wb-strength-fill.strong { background-color: var(--color-success); }

.wb-strength-label {
    font-size: clamp(10px, 0.7vw, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wb-strength-label.weak { color: var(--color-error); }
.wb-strength-label.medium { color: var(--color-warning); }
.wb-strength-label.strong { color: var(--color-success); }

/* Terms text */
.wb-auth-terms {
    text-align: center;
    font-size: clamp(10px, 0.75vw, 12px);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
    line-height: 1.5;
}

.wb-auth-terms a {
    color: var(--color-gold-dark);
    text-decoration: none;
}

.wb-auth-terms a:hover {
    text-decoration: underline;
}

/* Hide WooCommerce default notices on auth page */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper {
    max-width: clamp(380px, 30vw, 480px);
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 480px) {
    .wb-auth-card {
        max-width: 100%;
    }

    .wb-auth-field-row {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END OF WOOCOMMERCE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */