/* =============================================================================
   Daisy Lane — WooCommerce Cart & Checkout (classic shortcode) styling
   -----------------------------------------------------------------------------
   Cart/checkout were switched from the WooCommerce *blocks* to the classic
   shortcodes ([woocommerce_cart] / [woocommerce_checkout]) on 2026-06-16, so
   this targets classic markup (.shop_table, .cart_totals, #order_review, the
   .button family, …) — NOT the .wc-block-* selectors used before.

   Design language adapted from the Member Profiles plugin (buttons / inputs /
   tables / headings), keyed to Daisy Lane's sage-green brand.
   ========================================================================== */

:root {
    --dl-green: #88aea6;        /* brand sage (matches site headings) */
    --dl-green-dark: #5f817a;   /* buttons / strong accent (white text passes AA) */
    --dl-green-darker: #4c6a63; /* hover / pressed */
    --dl-text: #333;
    --dl-border: #e2e2e2;
}

/* ---------------------------------------------------------------------------
   Section headings — the theme renders these at 50px sage; tame them.
   --------------------------------------------------------------------------- */
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: var(--dl-green-dark) !important;
    margin-bottom: 14px !important;
}

/* ---------------------------------------------------------------------------
   Tables — cart contents, cart totals, order review.
   --------------------------------------------------------------------------- */
.woocommerce table.shop_table {
    border: 1px solid var(--dl-border) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-top-color: #ececec !important;
}

/* Product thumbnails — tidy bordered squares (also keeps the WooCommerce
   placeholder from looking broken on products with no featured image). */
.woocommerce td.product-thumbnail img {
    border-radius: 6px !important;
    border: 1px solid var(--dl-border) !important;
    background: #fafafa !important;
    max-width: 64px !important;
    height: auto !important;
}

/* ---------------------------------------------------------------------------
   Form fields — consistent rounding, lighter border, brand focus ring.
   Covers cart (coupon / qty) and checkout (address inputs / selects / select2).
   --------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input.qty,
.woocommerce #coupon_code,
.woocommerce .select2-container .select2-selection {
    font-size: 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce #coupon_code {
    padding: 9px 12px !important;
}

/* select2 (country / state) — match the native input height. */
.woocommerce .select2-container--default .select2-selection--single {
    height: 42px !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    padding-left: 12px !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce #coupon_code:focus,
.woocommerce .select2-container--default.select2-container--focus .select2-selection {
    border-color: var(--dl-green-dark) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dl-green) 30%, transparent) !important;
    outline: none !important;
}

/* ---------------------------------------------------------------------------
   Buttons.
   --------------------------------------------------------------------------- */
/* Primary — Proceed to checkout / Place order / any .alt button: solid sage. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order {
    background-color: var(--dl-green-dark) !important;
    color: #fff !important;
    border: 1px solid var(--dl-green-dark) !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    text-shadow: none !important;
    transition: background-color .15s, border-color .15s !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
    background-color: var(--dl-green-darker) !important;
    border-color: var(--dl-green-darker) !important;
    color: #fff !important;
}

/* Secondary — Apply coupon / Update cart / View cart: outline sage. */
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt) {
    background-color: #fff !important;
    color: var(--dl-green-dark) !important;
    border: 1px solid var(--dl-green-dark) !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 11px 22px !important;
    text-shadow: none !important;
    transition: background-color .15s, color .15s !important;
}

.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover {
    background-color: var(--dl-green-dark) !important;
    color: #fff !important;
}

/* Disabled (e.g. Update cart before a change is made). */
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] {
    opacity: .5 !important;
}

/* ---------------------------------------------------------------------------
   Success / info notices — retint the default accent to brand sage.
   --------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--dl-green) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--dl-green) !important;
}