/**
 * Drobe WooCommerce styling — Cart, Checkout, My Account, Order Received.
 * Matches the product page: dark navy backdrop, frosted glass boxes,
 * Helvetica, white text, rounded glass-pill CTAs.
 */

/* Set the html background immediately so there is never a white flash
   before the body background-image finishes painting. */
html:has(body.drobe-woo-page),
html:has(body.woocommerce-cart),
html:has(body.woocommerce-checkout),
html:has(body.woocommerce-account),
html:has(body.woocommerce-order-received) {
    background-color: #0c1830;
}

body.drobe-woo-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-order-received {
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 22%, rgba(8,22,48,0.88) 78%, #081630 100%),
        radial-gradient(ellipse 95% 75% at 50% 30%, #0c1830 0%, #060f26 55%, #0c1830 100%) !important;
    background-attachment: fixed;
    color: #fff;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* background-attachment:fixed forces a CPU repaint on every scroll frame on
   mobile — kills smoothness and can cause white flashes. Swap to scroll. */
@media (max-width: 900px) {
    body.drobe-woo-page,
    body.woocommerce-cart,
    body.woocommerce-checkout,
    body.woocommerce-account,
    body.woocommerce-order-received {
        background-attachment: scroll !important;
        /* Fallback solid so the page is never white even during JS hydration */
        background-color: #0c1830 !important;
    }
}

.drobe-page-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 130px 26px 70px;
    color: #fff;
    font-size: 13px;
    line-height: 1.55;
}
@media (max-width: 900px) { .drobe-page-main { padding: 110px 18px 56px; } }

.drobe-woo-page,
.drobe-woo-page .wc-block-checkout,
.drobe-woo-page .wc-block-cart,
.drobe-woo-page .wp-block-woocommerce-checkout,
.drobe-woo-page .wp-block-woocommerce-cart {
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.drobe-page-content { color: #fff; }

/* ===== Page title (Cart / Checkout banners) — clean wordmark style ===== */
.drobe-woo-page .wc-block-components-title,
.drobe-woo-page .wc-block-cart__main h1,
.drobe-woo-page .wc-block-checkout__main h1,
.drobe-woo-page .wp-block-woocommerce-cart h1,
.drobe-woo-page .wp-block-woocommerce-checkout h1,
.drobe-woo-page .entry-title {
    font-size: clamp(22px, 2.8vw, 32px) !important;
    font-weight: 300 !important;
    letter-spacing: -0.005em !important;
    color: #fff !important;
    margin: 0 0 22px !important;
    text-transform: none !important;
    line-height: 1.1 !important;
}

/* ===== Block layout containers — pad them out, give breathing room ===== */
.drobe-woo-page .wp-block-woocommerce-cart,
.drobe-woo-page .wp-block-woocommerce-checkout {
    color: #fff;
}
.drobe-woo-page .wc-block-checkout,
.drobe-woo-page .wc-block-cart {
    color: #fff;
}

/* ===== Glass-box treatment on each card / panel — slimmer, quieter ===== */
/*
 * Rule: only TOP-LEVEL containers get the glass box.
 * Never style a child element as a glass box when it's already inside one —
 * that creates nested double-bordered empty boxes.
 *
 * Removed from this list (they live inside the sidebar glass box already):
 *   .wc-block-components-totals-wrapper
 *   .wc-block-components-checkout-order-summary
 *   .wc-block-cart__totals-title + *
 *
 * Changed table.shop_table → table.shop_table.cart so the INNER totals
 * table inside .cart_totals doesn't get its own glass box (double-boxed).
 */
.drobe-woo-page .wc-block-components-checkout-step,
.drobe-woo-page .wc-block-cart-items,
.drobe-woo-page .wp-block-woocommerce-checkout-totals-block,
.drobe-woo-page .wp-block-woocommerce-cart-totals-block,
.drobe-woo-page .wc-block-checkout__sidebar > .wc-block-components-sidebar,
.drobe-woo-page table.shop_table.cart,
.drobe-woo-page .cart-collaterals .cart_totals,
.drobe-woo-page .woocommerce-MyAccount-content,
.drobe-woo-page .woocommerce-Address,
.drobe-woo-page .woocommerce-customer-details,
.drobe-woo-page .woocommerce-order-details,
.drobe-woo-page .woocommerce-order-overview {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background:
        radial-gradient(ellipse 75% 90% at 22% 12%,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.03) 50%,
            rgba(255,255,255,0) 80%),
        rgba(8, 16, 36, 0.45) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 8px 24px rgba(0,0,0,0.22) !important;
    padding: 22px 24px !important;
    margin-bottom: 16px !important;
}
/* Tighter box padding on mobile — same visual weight, less vertical height */
@media (max-width: 900px) {
    .drobe-woo-page .wc-block-components-checkout-step,
    .drobe-woo-page .wc-block-cart-items,
    .drobe-woo-page .wp-block-woocommerce-checkout-totals-block,
    .drobe-woo-page .wp-block-woocommerce-cart-totals-block,
    .drobe-woo-page .wc-block-checkout__sidebar > .wc-block-components-sidebar,
    .drobe-woo-page .cart-collaterals .cart_totals,
    .drobe-woo-page .woocommerce-order-overview {
        padding: 14px 16px !important;
    }

    /* WooCommerce blocks add their own 36px bottom padding inside the order
       summary and actions blocks — kills the tightness we set above. Zero them. */
    .drobe-woo-page .wp-block-woocommerce-checkout-order-summary-block,
    .drobe-woo-page .wc-block-checkout__actions,
    .drobe-woo-page .wp-block-woocommerce-checkout-order-summary-cart-items-block,
    .drobe-woo-page .wp-block-woocommerce-checkout-order-summary-totals-block {
        padding-top:    0 !important;
        padding-bottom: 0 !important;
        margin-bottom:  0 !important;
    }

    /* The H2 "Order summary" heading margin-bottom is also too generous on mobile */
    .drobe-woo-page .wc-block-components-checkout-step__title,
    .drobe-woo-page .wc-block-components-title.wc-block-checkout__title {
        margin-bottom: 10px !important;
    }
}

/* Section headers — small, light, hair-tracked. No more loud uppercase. */
.drobe-woo-page .wc-block-components-checkout-step__title,
.drobe-woo-page .wc-block-components-title.wc-block-checkout__title {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.7) !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}
.drobe-woo-page .wc-block-components-checkout-step__description {
    font-size: 12px !important;
    color: rgba(255,255,255,0.62) !important;
    margin-top: 4px !important;
    line-height: 1.5 !important;
}

/* ===== Form fields — slim frosted glass ===== */
.drobe-woo-page input[type="text"],
.drobe-woo-page input[type="email"],
.drobe-woo-page input[type="tel"],
.drobe-woo-page input[type="number"],
.drobe-woo-page input[type="password"],
.drobe-woo-page input[type="search"],
.drobe-woo-page select,
.drobe-woo-page textarea,
.drobe-woo-page .wc-block-components-text-input input,
.drobe-woo-page .wc-block-components-combobox input,
.drobe-woo-page .wc-block-components-country-input input,
.drobe-woo-page .wc-block-components-state-input input,
.drobe-woo-page .components-form-token-field__input-container,
.drobe-woo-page .select2-selection,
.drobe-woo-page .select2-selection--single {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 10px 14px !important;
    min-height: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.drobe-woo-page input::placeholder,
.drobe-woo-page textarea::placeholder { color: rgba(255,255,255,0.4) !important; }

.drobe-woo-page input:focus,
.drobe-woo-page select:focus,
.drobe-woo-page textarea:focus,
.drobe-woo-page .wc-block-components-text-input input:focus,
.drobe-woo-page .select2-selection--single:focus {
    border-color: rgba(255,255,255,0.85) !important;
    outline: none !important;
    background: rgba(255,255,255,0.10) !important;
}

/* Block input wrappers — kill the white border WC blocks add by default */
.drobe-woo-page .wc-block-components-text-input,
.drobe-woo-page .wc-block-components-combobox,
.drobe-woo-page .wc-block-components-country-input,
.drobe-woo-page .wc-block-components-state-input {
    background: transparent !important;
}

/* Country / state select picker — WC Blocks uses a custom wrapper that
   WC's own CSS hard-codes white. Override the whole component. */
.drobe-woo-page .wc-blocks-components-select__container {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    box-shadow: none !important;
}
.drobe-woo-page .wc-blocks-components-select__container:focus-within {
    border-color: rgba(255,255,255,0.85) !important;
    background: rgba(255,255,255,0.10) !important;
}
.drobe-woo-page .wc-blocks-components-select__select {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    width: 100% !important;
    cursor: pointer !important;
}
.drobe-woo-page .wc-blocks-components-select__select option {
    background: #0c1830 !important;
    color: #fff !important;
}
.drobe-woo-page .wc-blocks-components-select__label {
    color: rgba(255,255,255,0.62) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    font-weight: 400 !important;
}
.drobe-woo-page .wc-block-components-text-input label,
.drobe-woo-page .wc-block-components-combobox label,
.drobe-woo-page .wc-block-components-text-input.is-active label,
.drobe-woo-page .wc-block-components-checkbox__label {
    color: rgba(255,255,255,0.62) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: none !important;
    font-weight: 400 !important;
}
.drobe-woo-page .wc-block-components-checkbox__label { font-size: 12px !important; color: rgba(255,255,255,0.82) !important; }
.drobe-woo-page label,
.drobe-woo-page .form-row label {
    color: rgba(255,255,255,0.62) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: none !important;
    margin-bottom: 4px !important;
    display: block;
}
.drobe-woo-page .required { color: #ff9b9b !important; }

/* Select dropdown arrow visibility */
.drobe-woo-page select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #fff 50%),
        linear-gradient(135deg, #fff 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px !important;
}
.drobe-woo-page select option { background: #0c1830; color: #fff; }

/* Checkboxes / radios */
.drobe-woo-page input[type="checkbox"],
.drobe-woo-page input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid rgba(255,255,255,0.6) !important;
    background: transparent !important;
    border-radius: 4px !important;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    padding: 0 !important;
}
.drobe-woo-page input[type="radio"] { border-radius: 50% !important; }
.drobe-woo-page input[type="checkbox"]:checked {
    background: #fff !important;
    border-color: #fff !important;
}
.drobe-woo-page input[type="checkbox"]:checked::after {
    content: '';
    position: absolute; left: 4px; top: 0;
    width: 6px; height: 12px;
    border: solid #0c1830; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.drobe-woo-page input[type="radio"]:checked {
    background: radial-gradient(circle at center, #fff 0 35%, transparent 36% 100%) !important;
    border-color: #fff !important;
}

/* ===== Tables (cart line items) ===== */
.drobe-woo-page table.shop_table,
.drobe-woo-page .wc-block-cart-items table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #fff !important;
}
.drobe-woo-page table.shop_table th,
.drobe-woo-page .wc-block-cart-items th {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.6) !important;
    border: none !important;
    padding: 14px 8px !important;
    background: transparent !important;
}
.drobe-woo-page table.shop_table td,
.drobe-woo-page .wc-block-cart-items td {
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    padding: 18px 8px !important;
    color: rgba(255,255,255,0.92) !important;
    background: transparent !important;
}
.drobe-woo-page table.shop_table td a,
.drobe-woo-page .wc-block-cart-items td a { color: #fff !important; }

/* Cart row product info / variation meta */
.drobe-woo-page .wc-block-components-product-name,
.drobe-woo-page .product-name a {
    font-weight:     500 !important;
    font-size:       13px !important;
    color:           #fff !important;
    text-decoration: none !important;
    letter-spacing:  -0.01em !important;
}
/* All cart table links — no underline */
.drobe-woo-page table.shop_table td a {
    text-decoration: none !important;
}
.drobe-woo-page table.shop_table td a:hover {
    text-decoration: none !important;
    opacity: 0.85;
}
.drobe-woo-page .wc-block-components-product-metadata,
.drobe-woo-page .variation,
.drobe-woo-page .variation dt,
.drobe-woo-page .variation dd { color: rgba(255,255,255,0.72) !important; font-size: 12px !important; }
.drobe-woo-page .wc-block-components-product-metadata__description-text { color: rgba(255,255,255,0.72) !important; }

/* Quantity stepper */
.drobe-woo-page .wc-block-components-quantity-selector,
.drobe-woo-page .quantity {
    border: 1px solid rgba(255,255,255,0.32) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.05) !important;
    overflow: hidden;
}
.drobe-woo-page .wc-block-components-quantity-selector__input { color: #fff !important; }
.drobe-woo-page .wc-block-components-quantity-selector__button { color: #fff !important; }

/* Remove (x) button */
.drobe-woo-page .wc-block-cart-item__remove-link,
.drobe-woo-page .product-remove .remove {
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}
.drobe-woo-page .wc-block-cart-item__remove-link:hover { color: #fff !important; }

/* ===== Totals + summary — quiet, hairline-divided ===== */
.drobe-woo-page .wc-block-components-totals-item,
.drobe-woo-page .wc-block-components-totals-footer-item,
.drobe-woo-page tr.order-total,
.drobe-woo-page tr.cart-subtotal,
.drobe-woo-page tr.shipping {
    color: #fff !important;
    font-size: 12px !important;
    padding: 6px 0 !important;
}
.drobe-woo-page .wc-block-components-totals-footer-item,
.drobe-woo-page tr.order-total td,
.drobe-woo-page tr.order-total th {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #fff !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
}
.drobe-woo-page .wc-block-components-totals-item__label { color: rgba(255,255,255,0.7) !important; font-size: 12px !important; }
.drobe-woo-page .wc-block-components-totals-item__value { color: #fff !important; font-size: 12px !important; }

/* ===== Primary CTA — slim glass pill ===== */
.drobe-woo-page .wp-block-button__link,
.drobe-woo-page .wc-block-components-button,
.drobe-woo-page button.button,
.drobe-woo-page .button.alt,
.drobe-woo-page .wc-block-cart__submit-button,
.drobe-woo-page .wc-block-components-checkout-place-order-button,
.drobe-woo-page #place_order {
    display: inline-block;
    padding: 9px 20px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.32) !important;
    background:
        radial-gradient(ellipse 75% 90% at 22% 18%,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0.04) 45%,
            rgba(255,255,255,0) 75%) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: rgba(255,255,255,0.90) !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 4px 12px rgba(0,0,0,0.20) !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: border-color 0.18s ease, transform 0.15s ease;
    width: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
}
.drobe-woo-page .wp-block-button__link:hover,
.drobe-woo-page .wc-block-components-button:hover,
.drobe-woo-page button.button:hover,
.drobe-woo-page .button.alt:hover,
.drobe-woo-page .wc-block-cart__submit-button:hover,
.drobe-woo-page .wc-block-components-checkout-place-order-button:hover,
.drobe-woo-page #place_order:hover {
    border-color: rgba(255,255,255,0.85) !important;
    transform: translateY(-1px);
}

/* ===== Place Order — standalone override (overrides generic button above) ===== */
.drobe-woo-page .wc-block-components-checkout-place-order-button {
    display: block !important;
    width: 100% !important;
    padding: 20px 32px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.20em !important;
    text-align: center !important;
    background: rgba(255,255,255,0.88) !important;
    color: #060f26 !important;
    border: 1.5px solid rgba(255,255,255,0.95) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.60),
        0 8px 32px rgba(0,0,0,0.30) !important;
    margin-top: 8px !important;
}
/* Inner text wrapper WC puts inside the button — also centre it */
.drobe-woo-page .wc-block-components-checkout-place-order-button .wc-block-components-button__text,
.drobe-woo-page .wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}
.drobe-woo-page .wc-block-components-checkout-place-order-button:hover {
    background: #fff !important;
    color: #060f26 !important;
    border-color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.70),
        0 16px 48px rgba(0,0,0,0.40),
        0 0 28px 8px rgba(215,170,75,0.22) !important;
}


/* "Add a note to your order" checkbox — gap between box and label text */
.drobe-woo-page .wc-block-checkout__add-note label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
}
.drobe-woo-page .wc-block-checkout__add-note .wc-block-components-checkbox__mark {
    flex-shrink: 0;
}

/* Coupon block — space it away from the order summary above.
   Must use both classes (specificity 0,3,0) to beat the
   .drobe-woo-page .wc-block-components-totals-wrapper reset below. */
.drobe-woo-page .wp-block-woocommerce-checkout-order-summary-coupon-form-block.wc-block-components-totals-wrapper {
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
/* Coupon / "Add coupons" link */
.drobe-woo-page .wc-block-components-totals-coupon button,
.drobe-woo-page .wc-block-components-panel__button {
    background: transparent !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: none !important;
    padding: 10px 18px !important;
    font-size: 11px !important;
}

/* ===== Sidebar / right column on checkout ===== */
.drobe-woo-page .wc-block-checkout__sidebar,
.drobe-woo-page .wc-block-components-sidebar {
    color: #fff;
}
.drobe-woo-page .wc-block-components-order-summary,
.drobe-woo-page .wc-block-components-order-summary-item {
    color: #fff !important;
}
/* Quantity bubble — white circle with dark number so the count is readable */
.drobe-woo-page .wc-block-components-order-summary-item__quantity {
    color:      #021832 !important;
    background: #fff    !important;
    border:     none    !important;
}
/* Hide ONLY the short-description paragraph; the name + colour details stay visible.
   DOM: __description (wrapper) > product-name h3, product-metadata > __description p, product-details */
.drobe-woo-page .wc-block-components-product-metadata__description {
    display: none !important;
}
/* Item prices, name, meta — all white */
.drobe-woo-page .wc-block-components-order-summary-item__total-price,
.drobe-woo-page .wc-block-components-order-summary-item__individual-prices,
.drobe-woo-page .wc-block-components-order-summary-item__full-price,
.drobe-woo-page .wc-block-components-order-summary-item__metadata p,
.drobe-woo-page .wc-block-components-order-summary-item__metadata dt,
.drobe-woo-page .wc-block-components-order-summary-item__metadata dd,
.drobe-woo-page .wc-block-components-order-summary__toggle-text,
.drobe-woo-page .wc-block-components-order-summary__toggle-text * {
    color: rgba(255,255,255,0.92) !important;
}
.drobe-woo-page .wc-block-components-order-summary-item__image > img {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
    object-fit: contain !important;
    object-position: center !important;
    padding: 4px;
}

/* ===== Notices (errors / success) ===== */
.drobe-woo-page .wc-block-components-notice-banner,
.drobe-woo-page .woocommerce-message,
.drobe-woo-page .woocommerce-info,
.drobe-woo-page .woocommerce-error {
    border-radius: 14px !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    color: #fff !important;
    padding: 14px 18px !important;
    margin-bottom: 18px !important;
}
.drobe-woo-page .woocommerce-error { border-color: rgba(220, 100, 100, 0.55) !important; background: rgba(180, 60, 60, 0.18) !important; }

/* Empty cart message */
.drobe-woo-page .cart-empty,
.drobe-woo-page .wc-block-cart__empty-cart__title {
    color: #fff !important;
    text-align: center;
}
.drobe-woo-page .return-to-shop a {
    margin-top: 16px;
}

/* Links inside checkout — no underline by default; only inline prose links get one */
.drobe-woo-page a { color: #fff; text-decoration: none; }
.drobe-woo-page a:hover { color: rgba(255,255,255,0.85); }
/* Inline text links (terms, privacy, help) get a subtle underline */
.drobe-woo-page .woocommerce-privacy-policy-text a,
.drobe-woo-page .wc-block-components-checkout-policies__policy a,
.drobe-woo-page .woocommerce-terms-and-conditions-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.75;
}

/* ===== Spacing between header and content (clear the fixed nav) ===== */
.drobe-woo-page main.drobe-page-main,
.drobe-woo-page .drobe-page-content {
    max-width: 1180px;
    margin: 0 auto;
    color: #fff;
}

/* ===== Classic cart: push content below the fixed header ===== */
.woocommerce-cart    .drobe-page-main,
.woocommerce-checkout .drobe-page-main {
    padding-top: 210px !important;
}
@media (max-width: 900px) {
    .woocommerce-cart    .drobe-page-main,
    .woocommerce-checkout .drobe-page-main {
        padding-top: 90px !important;
    }
}

/* ===== Classic cart: product thumbnail — square, large enough to read ===== */
.drobe-woo-page table.shop_table td.product-thumbnail {
    width: 90px !important;
    padding: 14px 10px 14px 0 !important;
}
.drobe-woo-page table.shop_table td.product-thumbnail img {
    width:      80px !important;
    height:     80px !important;
    min-width:  80px !important;
    min-height: 80px !important;
    max-width:  80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 10px !important;
    display: block !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.04) !important;
    padding: 4px !important;
}
@media (max-width: 900px) {
    .drobe-woo-page table.shop_table td.product-thumbnail img {
        width:  64px !important;
        height: 64px !important;
        min-width:  64px !important;
        min-height: 64px !important;
        max-width:  64px !important;
        max-height: 64px !important;
        object-fit: contain !important;
        background: rgba(255,255,255,0.04) !important;
        padding: 3px !important;
    }
}

/* ===== Classic cart: cart totals heading — quiet, tracked, small ===== */
.drobe-woo-page .cart_totals h2,
.drobe-woo-page .cart_totals > h2 {
    font-size:      11px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color:          rgba(255,255,255,0.55) !important;
    font-weight:    500 !important;
    margin:         0 0 18px !important;
    line-height:    1.3 !important;
}

/* The inner totals table is NO LONGER a glass-box itself (see fix above).
   Make it flat and transparent so it reads cleanly inside .cart_totals. */
.drobe-woo-page .cart_totals table.shop_table {
    width:          100% !important;
    background:     transparent !important;
    border:         none !important;
    border-radius:  0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:     none !important;
    padding:        0 !important;
    margin-bottom:  0 !important;
}

/* Subtotal / total row text sizes */
.drobe-woo-page .cart_totals table.shop_table th,
.drobe-woo-page .cart_totals table.shop_table td {
    font-size:   13px !important;
    padding:     10px 6px !important;
    color:       rgba(255,255,255,0.90) !important;
    background:  transparent !important;
    border-top:  1px solid rgba(255,255,255,0.08) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}
.drobe-woo-page .cart_totals table.shop_table tr:first-child th,
.drobe-woo-page .cart_totals table.shop_table tr:first-child td {
    border-top: none !important;
}
.drobe-woo-page .cart_totals table.shop_table tr.order-total th,
.drobe-woo-page .cart_totals table.shop_table tr.order-total td {
    font-size:   15px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    border-top:  1px solid rgba(255,255,255,0.18) !important;
    color:       #fff !important;
}

/* Shipping row — show all inner text clearly */
.drobe-woo-page .cart_totals .woocommerce-shipping-totals td,
.drobe-woo-page .cart_totals .woocommerce-shipping-totals td *,
.drobe-woo-page .cart_totals .shipping-calculator-button,
.drobe-woo-page .cart_totals .woocommerce-shipping-methods li label,
.drobe-woo-page .cart_totals .woocommerce-shipping-methods .amount {
    color: rgba(255,255,255,0.80) !important;
}
/* "Enter your address to view shipping options" notice text */
.drobe-woo-page .cart_totals .woocommerce-shipping-destination,
.drobe-woo-page .cart_totals .woocommerce-no-shipping-available-html {
    color: rgba(255,255,255,0.55) !important;
    font-size: 12px !important;
}

/* Block checkout: totals inside the sidebar — already inside glass box,
   just needs readable text (no extra box). */
.drobe-woo-page .wc-block-components-totals-wrapper {
    background:  transparent !important;
    border:      none !important;
    box-shadow:  none !important;
    padding:     0 !important;
    margin:      0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Divider lines between totals rows */
.drobe-woo-page .wc-block-components-totals-item {
    border-top:  1px solid rgba(255,255,255,0.08) !important;
    padding-top: 10px !important;
    margin-top:  6px !important;
}
.drobe-woo-page .wc-block-components-totals-item:first-child {
    border-top: none !important;
    margin-top: 0 !important;
}
/* Shipping row text in block checkout */
.drobe-woo-page .wc-block-components-totals-shipping *,
.drobe-woo-page .wc-block-components-totals-shipping .wc-block-components-totals-item__label,
.drobe-woo-page .wc-block-components-totals-shipping .wc-block-components-totals-item__value {
    color: rgba(255,255,255,0.85) !important;
}
/* "Shipping to X — change" and "calculated at checkout" notices */
.drobe-woo-page .wc-block-components-shipping-rates-control__package,
.drobe-woo-page .wc-block-components-totals-shipping__via,
.drobe-woo-page .wc-block-components-totals-shipping__via * {
    color: rgba(255,255,255,0.55) !important;
    font-size: 12px !important;
}

/* Checkout button — full width, slightly more prominent than utility buttons */
.drobe-woo-page .wc-proceed-to-checkout {
    padding: 18px 0 0 !important;
}
.drobe-woo-page .wc-proceed-to-checkout a.checkout-button {
    display:         block !important;
    width:           100% !important;
    text-align:      center !important;
    box-sizing:      border-box !important;
    padding:         12px 24px !important;  /* slightly taller than utility buttons */
    font-size:       10px !important;
    letter-spacing:  0.22em !important;
    font-weight:     500 !important;
    border-color:    rgba(255,255,255,0.50) !important;
}

/* Cart totals box — right-aligned on desktop, full width on mobile */
.drobe-woo-page .cart-collaterals .cart_totals {
    float:     none !important;
    width:     100% !important;
    max-width: 460px !important;
    margin:    0 0 0 auto !important;
}

/* ===== Coupon form — wider input + tighter layout on desktop ===== */
.drobe-woo-page .cart .coupon {
    display:   flex !important;
    gap:       10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width:     100% !important;
    max-width: 380px !important;
}
.drobe-woo-page .cart .coupon #coupon_code {
    flex:      1 1 auto !important;
    min-width: 0 !important;
    width:     auto !important;
    max-width: none !important;
}
.drobe-woo-page .cart .coupon button[name="apply_coupon"] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Qty input — classic cart */
.drobe-woo-page .quantity .qty {
    width:      56px !important;
    text-align: center !important;
    background: transparent !important;
    color:      #fff !important;
    border:     none !important;
    padding:    0 8px !important;
}

/* =====================================================================
   MOBILE CART — override WooCommerce smallscreen (max-width: 768px)
   WC hides td.product-thumbnail via media-attribute on the link tag.
   We restore it and build a proper image-left card layout.
   ===================================================================== */
@media only screen and (max-width: 768px) {

    /* 0. Switch table to block so it can't overflow the viewport.
          The default <table> layout computes intrinsic width from all 6
          columns and ignores overflow constraints — display:block stops that. */
    .drobe-woo-page table.shop_table.cart {
        display:    block !important;
        width:      100% !important;
        max-width:  100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    /* Hide the 6-column header row — it's the biggest cause of overflow */
    .drobe-woo-page table.shop_table.cart thead {
        display: none !important;
    }
    /* tbody / tfoot also need to become block containers */
    .drobe-woo-page table.shop_table.cart tbody,
    .drobe-woo-page table.shop_table.cart tfoot {
        display:    block !important;
        width:      100% !important;
        box-sizing: border-box !important;
    }
    /* Every tr becomes block too — otherwise non-flex rows (like the actions row)
       stay as display:table-row and can expand the table beyond the viewport. */
    .drobe-woo-page table.shop_table.cart tr {
        display:    block !important;
        width:      100% !important;
        box-sizing: border-box !important;
    }
    /* Base rule: every td is block + full width.
       Specific cells below override display/flex as needed. */
    .drobe-woo-page table.shop_table.cart td {
        display:    block !important;
        width:      100% !important;
        min-width:  0 !important;
        max-width:  100% !important;
        box-sizing: border-box !important;
    }
    /* Belt-and-suspenders: stop any stray child from pushing the page wider */
    body.woocommerce-cart,
    body.woocommerce-cart .drobe-page-main,
    body.woocommerce-cart .woocommerce,
    body.woocommerce-cart .cart-collaterals {
        overflow-x: hidden !important;
        max-width:  100vw !important;
    }
    /* cart_totals float resets on mobile */
    .drobe-woo-page .cart-collaterals .cart_totals {
        float:     none !important;
        width:     100% !important;
        max-width: 100% !important;
    }

    /* 1. Restore hidden thumbnail */
    .woocommerce-page table.cart td.product-thumbnail,
    .woocommerce table.cart td.product-thumbnail,
    .drobe-woo-page table.shop_table.cart td.product-thumbnail {
        display: block !important;
    }

    /* 2. Cart item row → flex container */
    .drobe-woo-page table.shop_table.cart tr.cart_item {
        display:         flex !important;
        flex-wrap:       wrap !important;
        align-items:     flex-start !important;
        padding:         14px 0 !important;
        position:        relative !important;
        border-bottom:   1px solid rgba(255,255,255,0.10) !important;
        gap:             0 !important;
    }

    /* 3. Remove × button — absolute top-right, no label */
    .drobe-woo-page table.shop_table.cart td.product-remove {
        position: absolute !important;
        top:      14px !important;
        right:    0  !important;
        width:    auto !important;
        padding:  0   !important;
    }
    .drobe-woo-page table.shop_table.cart td.product-remove::before {
        display: none !important;
    }

    /* 4. Thumbnail — left column, fixed 64 px square */
    .drobe-woo-page table.shop_table.cart td.product-thumbnail {
        order:      1 !important;
        flex-shrink: 0 !important;
        width:      76px !important;
        min-width:  76px !important;
        max-width:  76px !important;
        padding:    0 12px 0 0 !important;
        box-sizing: border-box !important;
    }
    .drobe-woo-page table.shop_table.cart td.product-thumbnail::before {
        display: none !important;
    }
    .drobe-woo-page table.shop_table.cart td.product-thumbnail img {
        width:      60px !important;
        height:     60px !important;
        min-width:  60px !important;
        min-height: 60px !important;
        max-width:  60px !important;
        max-height: 60px !important;
        border-radius: 8px !important;
        object-fit: contain !important;
        object-position: center !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        background: rgba(255,255,255,0.04) !important;
        padding: 3px !important;
        display: block !important;
    }

    /* 5. Product name — beside image, left-aligned, right-padded for the × button */
    .drobe-woo-page table.shop_table.cart td.product-name {
        order:      2 !important;
        flex:       1 !important;
        min-width:  0 !important;
        width:      auto !important;
        max-width:  none !important;
        padding:    0 36px 8px 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;      /* override WC smallscreen text-align:right */
    }
    .drobe-woo-page table.shop_table.cart td.product-name::before {
        display: none !important;
    }
    .drobe-woo-page table.shop_table.cart td.product-name a {
        font-size:   14px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        text-align:  left !important;
    }
    /* Variation DL — CSS Grid so label (col 1) and value (col 2) always sit on
       the same row. WooCommerce wraps each value in a <p>, so we can't rely on
       inline/float tricks to align them; grid is the only reliable approach. */
    .drobe-woo-page table.shop_table.cart td.product-name dl.variation {
        display:               grid !important;
        grid-template-columns: auto 1fr !important;
        gap:                   1px 6px !important;
        margin-top:            5px !important;
        margin-bottom:         0 !important;
        font-size:             12px !important;
        color:                 rgba(255,255,255,0.65) !important;
        line-height:           1.5 !important;
    }
    .drobe-woo-page table.shop_table.cart td.product-name dl.variation dt,
    .drobe-woo-page table.shop_table.cart td.product-name dl.variation dd {
        float:      none !important;
        display:    block !important;
        margin:     0 !important;
        padding:    0 !important;
        font-size:  12px !important;
        text-align: left !important;
        color:      rgba(255,255,255,0.65) !important;
        align-self: center !important;
    }
    /* Strip margin from the <p> WooCommerce wraps each value in */
    .drobe-woo-page table.shop_table.cart td.product-name dl.variation dd p {
        display: inline !important;
        margin:  0 !important;
        padding: 0 !important;
    }

    /* 6. Price / Qty / Subtotal — full-width rows indented under the image */
    .drobe-woo-page table.shop_table.cart td.product-price,
    .drobe-woo-page table.shop_table.cart td.product-quantity,
    .drobe-woo-page table.shop_table.cart td.product-subtotal {
        order:           3 !important;
        display:         flex !important;
        justify-content: space-between !important;
        align-items:     center !important;
        width:           100% !important;
        padding:         3px 0 3px 76px !important; /* indent = thumb col width */
        font-size:       13px !important;
        box-sizing:      border-box !important;
    }
    /* Label (::before) — muted, small-caps style */
    .drobe-woo-page table.shop_table.cart td.product-price::before,
    .drobe-woo-page table.shop_table.cart td.product-quantity::before,
    .drobe-woo-page table.shop_table.cart td.product-subtotal::before {
        color:           rgba(255,255,255,0.45) !important;
        font-size:       10px !important;
        letter-spacing:  0.10em !important;
        text-transform:  uppercase !important;
    }

    /* Coupon / Update cart — the TD itself carries class="actions" (the TR has none) */
    .drobe-woo-page table.shop_table.cart td.actions {
        display:        flex !important;
        flex-direction: column !important;
        align-items:    flex-start !important;
        gap:            10px !important;
        width:          100% !important;
        padding:        12px 0 0 !important;
    }
    /* Coupon row: stretch full width so its left edge matches the button */
    .drobe-woo-page .cart .coupon {
        max-width: 100% !important;
        width:     100% !important;
    }
    /* Update Cart: sit flush left, no float or stray margin */
    .drobe-woo-page .cart button[name="update_cart"] {
        float:      none !important;
        margin:     0 !important;
        align-self: flex-start !important;
    }
}

/* =====================================================================
   LIVE-SITE FALLBACKS: classless WC cart output
   WooCommerce normally wraps cart elements with .cart_totals,
   .shop_table, .wc-proceed-to-checkout etc. — but optimisation plugins
   or block-cart fallback modes can strip those classes.  These rules
   target the structural position of each element instead.
   ===================================================================== */

/* Cart totals heading — plain <h2> directly in .drobe-page-content */
.woocommerce-cart .drobe-page-content > h2,
.drobe-woo-page .drobe-page-content > h2 {
    font-size:      11px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color:          rgba(255,255,255,0.55) !important;
    font-weight:    500 !important;
    margin:         28px 0 16px !important;
    line-height:    1.3 !important;
}

/* Cart items table (inside the cart form) — glass box */
.woocommerce-cart .drobe-page-content > form > table,
.drobe-woo-page   .drobe-page-content > form > table {
    width:           100% !important;
    border-collapse: separate !important;
    border-spacing:  0 !important;
    border-radius:   16px !important;
    border:          1px solid rgba(255,255,255,0.18) !important;
    background:
        radial-gradient(ellipse 75% 90% at 22% 12%,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.03) 50%,
            rgba(255,255,255,0) 80%),
        rgba(8, 16, 36, 0.45) !important;
    backdrop-filter:          blur(12px);
    -webkit-backdrop-filter:  blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 8px 24px rgba(0,0,0,0.22) !important;
    padding:       0 !important;
    margin-bottom: 16px !important;
    color:         #fff !important;
    overflow:      hidden;
}
.woocommerce-cart .drobe-page-content > form > table th,
.drobe-woo-page   .drobe-page-content > form > table th {
    font-size:      10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color:          rgba(255,255,255,0.6) !important;
    border:         none !important;
    padding:        14px 8px !important;
    background:     transparent !important;
}
.woocommerce-cart .drobe-page-content > form > table td,
.drobe-woo-page   .drobe-page-content > form > table td {
    border:          none !important;
    border-top:      1px solid rgba(255,255,255,0.10) !important;
    padding:         18px 8px !important;
    color:           rgba(255,255,255,0.92) !important;
    background:      transparent !important;
}

/* Cart totals table — glass box, right-aligned, max 460px */
.woocommerce-cart .drobe-page-content > table,
.drobe-woo-page   .drobe-page-content > table {
    width:           100% !important;
    max-width:       460px !important;
    margin:          0 0 16px auto !important;
    border-collapse: separate !important;
    border-spacing:  0 !important;
    border-radius:   16px !important;
    border:          1px solid rgba(255,255,255,0.18) !important;
    background:
        radial-gradient(ellipse 75% 90% at 22% 12%,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.03) 50%,
            rgba(255,255,255,0) 80%),
        rgba(8, 16, 36, 0.45) !important;
    backdrop-filter:         blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 8px 24px rgba(0,0,0,0.22) !important;
    overflow: hidden;
    color: #fff !important;
}
.woocommerce-cart .drobe-page-content > table th,
.drobe-woo-page   .drobe-page-content > table th,
.woocommerce-cart .drobe-page-content > table td,
.drobe-woo-page   .drobe-page-content > table td {
    padding:    10px 16px !important;
    border:     none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    color:      rgba(255,255,255,0.90) !important;
    background: transparent !important;
    font-size:  13px !important;
}
.woocommerce-cart .drobe-page-content > table tr:first-child th,
.woocommerce-cart .drobe-page-content > table tr:first-child td,
.drobe-woo-page   .drobe-page-content > table tr:first-child th,
.drobe-woo-page   .drobe-page-content > table tr:first-child td {
    border-top: none !important;
}
/* Last row = total — slightly larger + brighter */
.woocommerce-cart .drobe-page-content > table tr:last-child th,
.woocommerce-cart .drobe-page-content > table tr:last-child td,
.drobe-woo-page   .drobe-page-content > table tr:last-child th,
.drobe-woo-page   .drobe-page-content > table tr:last-child td {
    font-size:   15px !important;
    font-weight: 500 !important;
    border-top:  1px solid rgba(255,255,255,0.18) !important;
    color:       #fff !important;
}

/* ===== DHL (and any carrier) logo inside shipping method label ===== */
/* Classic WC: ul#shipping_method > li > label > img                   */
/* WC Blocks:  .wc-block-components-radio-control__option label img    */
#shipping_method li label img,
.woocommerce-shipping-methods li label img,
.wc-block-components-shipping-rates-control__option label img,
.wc-block-components-radio-control__option label img,
.drobe-woo-page ul#shipping_method label img,
.drobe-woo-page .woocommerce-shipping-methods label img,
.cart_totals .shipping label img {
    width:         36px !important;
    height:        36px !important;
    min-width:     36px !important;
    max-width:     36px !important;
    max-height:    36px !important;
    border-radius: 50% !important;
    object-fit:    cover !important;
    object-position: center center !important;
    vertical-align: middle !important;
    margin:        0 10px 0 0 !important;
    display:       inline-block !important;
    flex-shrink:   0 !important;
}

/* ===== Proceed to Checkout — plain <a> in <p> when wrapper class missing ===== */
.woocommerce-cart .drobe-page-content > p > a[href*="checkout"],
.drobe-woo-page   .drobe-page-content > p > a[href*="checkout"] {
    display:      block !important;
    width:        100% !important;
    text-align:   center !important;
    box-sizing:   border-box !important;
    padding:      12px 24px !important;
    border-radius: 999px !important;
    border:       1px solid rgba(255,255,255,0.45) !important;
    background:
        radial-gradient(ellipse 75% 90% at 22% 18%,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0.04) 45%,
            rgba(255,255,255,0) 75%) !important;
    backdrop-filter:         blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color:          rgba(255,255,255,0.90) !important;
    font-size:      10px !important;
    font-weight:    500 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition:     border-color 0.18s ease, transform 0.15s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 4px 12px rgba(0,0,0,0.20) !important;
}
.woocommerce-cart .drobe-page-content > p > a[href*="checkout"]:hover,
.drobe-woo-page   .drobe-page-content > p > a[href*="checkout"]:hover {
    border-color: rgba(255,255,255,0.85) !important;
    transform:    translateY(-1px);
}
/* Container paragraph — max-width to match totals table + flush right */
.woocommerce-cart .drobe-page-content > p:has(a[href*="checkout"]),
.drobe-woo-page   .drobe-page-content > p:has(a[href*="checkout"]) {
    max-width:   460px !important;
    margin:      0 0 0 auto !important;
    padding-top: 0 !important;
}

/* Mobile: full-width totals + checkout */
@media (max-width: 768px) {
    .woocommerce-cart .drobe-page-content > table,
    .drobe-woo-page   .drobe-page-content > table {
        max-width: 100% !important;
        margin:    0 0 16px !important;
    }
    .woocommerce-cart .drobe-page-content > p:has(a[href*="checkout"]),
    .drobe-woo-page   .drobe-page-content > p:has(a[href*="checkout"]) {
        max-width: 100% !important;
        margin:    0 !important;
    }
}