/* ================================================================
   WOOCOMMERCE OVERRIDES — Dark theme styling for WC pages.
   Minimal, override-only approach — just color/background changes.
   ================================================================ */

/* ----------------------------------------------------------------
   Global WC overrides
   ---------------------------------------------------------------- */

.woocommerce,
.woocommerce-page {
    color: var(--flavor-text-primary, #fff);
}

.woocommerce a {
    color: var(--flavor-accent-primary, #e84393);
}

.woocommerce a:hover {
    color: var(--flavor-accent-primary-light, #fd79a8);
}

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */

.woocommerce .button,
.woocommerce .wc-block-components-button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
    background: var(--flavor-accent-gradient, linear-gradient(135deg, #e84393, #fd79a8)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-family: var(--font-body, 'Outfit', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: opacity 0.2s ease !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
    opacity: 0.9;
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
    background: var(--flavor-accent-gradient, linear-gradient(135deg, #e84393, #fd79a8)) !important;
}

/* ----------------------------------------------------------------
   Forms & inputs
   ---------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account .woocommerce-form input.input-text,
.woocommerce-account .woocommerce-form select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--flavor-text-primary, #fff);
    padding: 12px 14px;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 15px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--flavor-accent-primary, #e84393);
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.woocommerce form .form-row label {
    color: var(--flavor-text-secondary, #8892a8);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

/* ----------------------------------------------------------------
   Cart page
   ---------------------------------------------------------------- */

.woocommerce-cart .woocommerce table.shop_table {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
}

.woocommerce-cart .woocommerce table.shop_table th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--flavor-text-secondary, #8892a8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

.woocommerce-cart .woocommerce table.shop_table td {
    color: var(--flavor-text-primary, #fff);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

.woocommerce-cart .woocommerce .cart_totals {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
}

.woocommerce-cart .woocommerce .cart_totals table {
    border: none;
}

.woocommerce-cart .woocommerce .cart_totals th,
.woocommerce-cart .woocommerce .cart_totals td {
    color: var(--flavor-text-primary, #fff);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

/* Remove link */
.woocommerce a.remove {
    color: #f87171 !important;
}

.woocommerce a.remove:hover {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #f87171 !important;
}

/* ----------------------------------------------------------------
   Checkout page
   ---------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
    color: var(--flavor-text-primary, #fff);
}

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
    color: var(--flavor-text-primary, #fff);
}

.woocommerce-checkout .woocommerce table.shop_table {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.woocommerce-checkout .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.shop_table td {
    color: var(--flavor-text-primary, #fff);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

.woocommerce-checkout .woocommerce-info {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--flavor-text-primary, #fff);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

.woocommerce-checkout .woocommerce-info::before {
    color: var(--flavor-accent-primary, #e84393);
}

/* Returning customer login */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a {
    color: var(--flavor-accent-primary, #e84393);
}

/* Payment methods */
.woocommerce-checkout #payment {
    background: var(--flavor-bg-card, #1a2340);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.woocommerce-checkout #payment .payment_method label {
    color: var(--flavor-text-primary, #fff);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

.woocommerce-checkout #payment div.payment_box {
    background: rgba(255, 255, 255, 0.04);
    color: var(--flavor-text-secondary, #8892a8);
}

/* ----------------------------------------------------------------
   My Account page
   ---------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--flavor-bg-card, #1a2340);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    color: var(--flavor-text-secondary, #8892a8);
    padding: 10px 14px;
    display: block;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-body, 'Outfit', sans-serif);
    transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: rgba(255, 255, 255, 0.06);
    color: var(--flavor-text-primary, #fff);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--flavor-accent-primary, #e84393);
}

.woocommerce-account .woocommerce-MyAccount-content {
    color: var(--flavor-text-primary, #fff);
}

.woocommerce-account .woocommerce-MyAccount-content table {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-content table th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--flavor-text-secondary, #8892a8);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

.woocommerce-account .woocommerce-MyAccount-content table td {
    color: var(--flavor-text-primary, #fff);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

/* Account Details form */
.woocommerce-account .edit-account label {
    color: var(--flavor-text-secondary, #8892a8);
    font-size: 14px;
    font-family: var(--font-body, 'Outfit', sans-serif);
    margin-bottom: 6px;
    display: block;
}

.woocommerce-account .edit-account .input-text,
.woocommerce-account .edit-account input[type="text"],
.woocommerce-account .edit-account input[type="email"],
.woocommerce-account .edit-account input[type="password"] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--flavor-text-primary, #fff);
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font-body, 'Outfit', sans-serif);
    width: 100%;
    transition: border-color 0.2s ease;
}

.woocommerce-account .edit-account .input-text:focus,
.woocommerce-account .edit-account input:focus {
    border-color: var(--flavor-accent-primary, #e84393);
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.woocommerce-account .edit-account .form-row {
    margin-bottom: 16px;
}

/* Password change fieldset */
.flavor-password-fieldset {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
    background: rgba(255, 255, 255, 0.02);
}

.flavor-password-fieldset legend {
    color: var(--flavor-text-primary, #fff);
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-body, 'Outfit', sans-serif);
    padding: 0 8px;
}

/* Save button */
.woocommerce-account .edit-account .woocommerce-Button,
.woocommerce-account .edit-account button[type="submit"] {
    background: var(--flavor-accent-primary, #e84393) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body, 'Outfit', sans-serif);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.woocommerce-account .edit-account .woocommerce-Button:hover {
    opacity: 0.9;
}

/* ----------------------------------------------------------------
   Notices / Messages
   ---------------------------------------------------------------- */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--flavor-text-primary, #fff);
    font-family: var(--font-body, 'Outfit', sans-serif);
    border-top: 3px solid var(--flavor-accent-primary, #e84393);
}

.woocommerce .woocommerce-error {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 10px;
    color: #f87171;
    font-family: var(--font-body, 'Outfit', sans-serif);
    border-top: 3px solid #f87171;
}

.woocommerce .woocommerce-message::before {
    color: var(--flavor-accent-primary, #e84393);
}

.woocommerce .woocommerce-error::before {
    color: #f87171;
}

/* ----------------------------------------------------------------
   Order confirmation page
   ---------------------------------------------------------------- */

.woocommerce-order-received .woocommerce {
    color: var(--flavor-text-primary, #fff);
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
    color: var(--flavor-text-primary, #fff);
    font-family: var(--font-body, 'Outfit', sans-serif);
}

.woocommerce-order-received .woocommerce table.shop_table {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */

/* Responsive: Override WooCommerce's inline float layout for My Account.
   !important is needed here because WC sets width/float via inline styles. */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 20px;
    }
}

/* ----------------------------------------------------------------
   WooCommerce Block-based Cart & Checkout (WC 8+)
   ---------------------------------------------------------------- */

/* Page content wrapper — dark theme */
.flavor-page-body .wp-block-woocommerce-cart,
.flavor-page-body .wp-block-woocommerce-checkout {
    color: var(--flavor-text-primary, #fff);
}

/* Block-based cart/checkout table & panels */
.wc-block-cart .wc-block-cart-items,
.wc-block-checkout .wc-block-components-order-summary {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}

/* Block text colors */
.wc-block-cart,
.wc-block-checkout,
.wc-block-components-product-name,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__description,
.wc-block-components-product-metadata__description,
.wc-block-components-quantity-selector {
    color: var(--flavor-text-primary, #fff) !important;
}

/* Block form inputs */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select .wc-block-components-select__container select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: var(--flavor-text-primary, #fff) !important;
}

.wc-block-components-text-input label {
    color: var(--flavor-text-secondary, #8892a8) !important;
}

/* Block totals/summary panel */
.wc-block-components-totals-wrapper,
.wc-block-components-panel {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Block checkout sidebar */
.wc-block-checkout__sidebar {
    background: var(--flavor-bg-card, #1a2340);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}

/* Block buttons */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-button {
    background: var(--flavor-accent-gradient, linear-gradient(135deg, #e84393, #fd79a8)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
}

/* Block quantity selector */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    color: var(--flavor-text-primary, #fff) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Block remove item */
.wc-block-cart-item__remove-link {
    color: #f87171 !important;
}

/* Block payment methods */
.wc-block-components-radio-control__option {
    color: var(--flavor-text-primary, #fff) !important;
}

.wc-block-components-radio-control__description {
    color: var(--flavor-text-secondary, #8892a8) !important;
}

/* ----------------------------------------------------------------
   External cover images (fallback when sideload fails)
   ---------------------------------------------------------------- */

img.flavor-external-cover {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

/* Cart item thumbnail */
.woocommerce-cart-form .product-thumbnail img.flavor-external-cover,
.wc-block-cart-items img.flavor-external-cover {
    width: 64px;
    height: 80px;
    object-fit: cover;
}

/* Mini-cart */
.woocommerce-mini-cart-item img.flavor-external-cover {
    width: 48px;
    height: 60px;
    object-fit: cover;
}

/* Checkout order review */
.woocommerce-checkout-review-order img.flavor-external-cover {
    width: 48px;
    height: 60px;
    object-fit: cover;
}