/* ── DTB Theme Custom Styles ─────────────────────────────────────────────── */

/* ── Shop Sidebar Widgets ─────────────────────────────────────────────────── */
.dtb-widget {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.875rem;
    overflow: hidden;
    background: #fff;
}

.dtb-widget-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #374151;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.dtb-widget-title::after {
    content: '\2212'; /* − */
    font-size: 1.25rem;
    font-weight: 300;
    color: #6b7280;
    line-height: 1;
    flex-shrink: 0;
}
.dtb-widget.is-closed .dtb-widget-title::after {
    content: '+';
    font-size: 1.1rem;
}
.dtb-widget.is-closed .dtb-widget-title {
    border-bottom: none;
}

.dtb-widget-body {
    padding: 10px;
}
.dtb-widget.is-closed .dtb-widget-body {
    display: none;
}

/* Widget list items (layered nav + product categories) */
.dtb-widget-body ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.dtb-widget-body > ul > li,
.dtb-widget-body .wc-layered-nav-term,
.dtb-widget-body .cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 1rem;
    border-bottom: 1px solid #f3f4f6;
}
.dtb-widget-body > ul > li:last-child,
.dtb-widget-body .wc-layered-nav-term:last-child,
.dtb-widget-body .cat-item:last-child {
    border-bottom: none;
}
.dtb-widget-body li a {
    color: #374151;
    font-size: 0.8rem;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}
.dtb-widget-body li a:hover {
    color: #0d75bd;
}
.dtb-widget-body .count {
    font-size: 0.72rem;
    color: #9ca3af;
    flex-shrink: 0;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* Nested subcategory indentation */
.dtb-widget-body .children {
    padding-left: 1rem;
}
.dtb-widget-body .children li {
    border-bottom: 1px solid #f9fafb;
    padding: 0.35rem 1rem 0.35rem 0;
}

/* WooCommerce: hide default breadcrumb on front page */
.home .woocommerce-breadcrumb { display: none; }

/* Product card */
.dtb-product-card {
    display: flex;
    flex-direction: column;
}

/* Title: the full product name is always in the markup; this clamps it
   visually to 2 lines with a browser-drawn ellipsis, adapting to whatever
   width the card renders at — the same rule serves both the wide homepage
   grid and the narrower sidebar-adjacent category grid.
   The fixed height keeps every card in a row aligned whether the title
   wraps to 1 or 2 lines.
   font-size and padding pinned with !important: WC core's ".woocommerce
   ul.products li.product h3" rule sets font-size:1em AND padding:0.5em 0,
   out-specificing our Tailwind/plain declarations inside the shop loop.
   The padding override is load-bearing for the clamp — with border-box
   sizing, WC's 0.5em vertical padding shrinks the content area to ~1.3
   lines, which pushes the clamp's ellipsis line into the hidden region
   and makes titles look "cut off with no ellipsis" on category pages
   while identical markup renders fine on the homepage (no .woocommerce
   ancestor there). That padding was the real culprit the first time this
   clamp appeared broken. */
.dtb-card-title {
    height: 2.75em;       /* 2 × 1.375em */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.875rem !important;
    line-height: 1.375 !important;
    padding: 0 !important;
}

/* Fixed-height author row — 1 line; always rendered so cards align */
.dtb-card-author {
    height: 1.5em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* !important on color/background: WC core's ".woocommerce a.button" rule uses
   :where() (0 specificity) around extra context but still carries an element
   selector, out-specificing a plain two-class selector inside the shop loop. */
.dtb-product-card .button,
.dtb-product-card .add_to_cart_button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #1073be !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}
.dtb-product-card .button:hover,
.dtb-product-card .add_to_cart_button:hover {
    background-color: #0d75bd !important;
}
.dtb-product-card .added_to_cart {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: #0d75bd;
    margin-top: 0.25rem;
    text-decoration: none;
}

/* ── Add to Quote button (WooCommerce Quotation plugin) ──────────────────── */
.dtb-product-card .single_add_to_quote_loop {
    display: block;
    margin: 0.35rem 0 0;
    padding: 0;
}
.dtb-product-card .single_adq_button_loop {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: transparent !important;
    color: #1a2332 !important;
    border: 1.5px solid #1a2332 !important;
    border-radius: 0.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 1rem !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s !important;
    cursor: pointer !important;
}
.dtb-product-card .single_adq_button_loop:hover {
    background: #1a2332 !important;
    color: #ffffff !important;
}

/* Single product page quote button */
.single_add_to_quote_loop a.single_adq_button,
.button_add_to_quote .single_adq_button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: #1a2332;
    border: 1.5px solid #1a2332;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-top: 0.5rem;
}
.single_add_to_quote_loop a.single_adq_button:hover,
.button_add_to_quote .single_adq_button:hover {
    background: #1a2332;
    color: #ffffff;
}

/* WooCommerce price */
.dtb-product-card .woocommerce-Price-amount { color: #1a2332; }
.dtb-product-card ins .woocommerce-Price-amount { color: #f75454; }
.dtb-product-card del .woocommerce-Price-amount { color: #9ca3af; font-size: 0.8em; }

/* Stock status */
.stock_status {
    font-size: 0.7rem;
    color: #6b7280;
    display: block;
    margin-top: 0.125rem;
}

/* Hero slider */
#dtb-slider {
    min-height: 380px;
    background: linear-gradient(135deg, #fff6f6 0%, #f9f9f9 100%);
}

/* Hero banner wrapper — responsive height */
.dtb-hero-banner {
    min-height: 400px;
}
@media (max-width: 767px) {
    .dtb-hero-banner {
        aspect-ratio: 16 / 7;
        min-height: 0;
    }
    #dtb-slider {
        min-height: 0;
    }
}
.dtb-slide {
    display: flex;
}
.dtb-slide.hidden {
    display: none;
}

/* ── Best Sellers sections ────────────────────────────────────────────────── */
.dtb-bs-section {
    background: #fff;
    padding: 3rem 0;
    border-bottom: 1px solid #f3f4f6;
}

/* Centered title with flanking vertical accent bars */
.dtb-sec-hdr {
    position: relative;
    text-align: center;
    margin-bottom: 2rem;
}

.dtb-sec-title {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a2332;
    margin: 0;
    line-height: 1.2;
}

/* Vertical accent bars — sit beside the text, never across it */
.dtb-sec-title::before,
.dtb-sec-title::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 3px;
    height: 1.5em;
    background: #0d75bd;
    border-radius: 2px;
}

.dtb-sec-viewall {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: #0d75bd;
    text-decoration: none;
    white-space: nowrap;
}
.dtb-sec-viewall:hover { text-decoration: underline; }

/* ── Category archive header ──────────────────────────────────────────────── */
.woocommerce-products-header__title,
h1.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.625rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
}

.term-description {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.65;
    margin: 0.75rem 0 1.5rem;
    max-width: 68ch;
}
.term-description p { margin-bottom: 0.4rem; }
.term-description p:last-child { margin-bottom: 0; }

/* ── Shop toolbar (result count + sort) ──────────────────────────────────── */
.dtb-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1.5rem;
    background: #fff;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dtb-shop-toolbar .woocommerce-result-count {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
}
.dtb-shop-toolbar .woocommerce-ordering {
    margin: 0;
}
.dtb-shop-toolbar .woocommerce-ordering select {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.35rem 2rem 0.35rem 0.625rem;
    font-size: 0.8rem;
    color: #374151;
    background: #fff;
    cursor: pointer;
    appearance: auto;
}
.dtb-shop-toolbar .woocommerce-ordering select:focus {
    outline: none;
    border-color: #0d75bd;
    box-shadow: 0 0 0 2px rgba(13,117,189,0.2);
}

/* ── WooCommerce shop loop ────────────────────────────────────────────────── */
/* Same breakpoints as the homepage best-sellers grid (grid-cols-2 sm:grid-cols-3 lg:grid-cols-6) */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.75rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
@media (min-width: 640px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(6, 1fr) !important; }
}
/* WC core's float-clearfix pseudo-elements generate real content, so the grid
   treats them as anonymous items and silently eats the first/last cell. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}
/* li is just a bare grid cell — dtb_product_card() supplies its own card box.
   display:block (not the UA default list-item) avoids Chromium reserving an
   empty grid track for the marker box even with list-style:none. */
.woocommerce ul.products li.product {
    display: block !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Stock badge — absolutely positioned top-right over the product image */
.dtb-product-card .dtb-stock-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 6px;
    border-radius: 3px;
    color: #fff;
    z-index: 2;
    line-height: 1;
    pointer-events: none;
}
.dtb-product-card .dtb-stock-badge--instock    { background-color: #22c55e; border: 2px solid #FFF; }
.dtb-product-card .dtb-stock-badge--onbackorder { background-color: #f59e0b; border: 2px solid #FFF; }
.dtb-product-card .dtb-stock-badge--outofstock  { background-color: #ef4444; border: 2px solid #FFF; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Single Product Page                                                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Two-column layout: gallery left, summary right ─────────────────────── */
.single-product .woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 0;
    align-items: start;
}
/* Images span left column, summary spans right column */
.single-product .woocommerce div.product div.woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: 100% !important;
}
.single-product .woocommerce div.product div.summary {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: 100% !important;
    padding: 0.5rem 0 0;
}
/* Tabs, upsells, related — full-width below both columns */
.single-product .woocommerce div.product .woocommerce-tabs,
.single-product .woocommerce div.product .up-sells,
.single-product .woocommerce div.product .dtb-related-divider,
.single-product .woocommerce div.product .related {
    grid-column: 1 / -1;
    width: 100%;
    float: none !important;
    clear: both;
}

/* ── Product image gallery ───────────────────────────────────────────────── */
.single-product .woocommerce-product-gallery__wrapper img {
    border-radius: 0.75rem;
    border: 1px solid #f0f0f0;
}
.single-product .woocommerce-product-gallery__trigger { display: none; }
.single-product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0;
    list-style: none;
}
.single-product .flex-control-thumbs li { width: 72px !important; }
.single-product .flex-control-thumbs li img {
    border-radius: 0.375rem;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, border-color 0.15s;
}
.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:hover {
    border-color: #0d75bd;
    opacity: 1;
}

/* ── Summary: title, price, meta ─────────────────────────────────────────── */
.single-product .product_title {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    line-height: 1.25 !important;
    margin: 0 0 0.75rem !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #e53e3e !important;
    display: block;
    margin: 0.5rem 0 1rem !important;
}
.single-product .woocommerce-product-details__short-description {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
}
.single-product .product_meta {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}
.single-product .product_meta span,
.single-product .product_meta .sku_wrapper,
.single-product .product_meta .posted_in,
.single-product .product_meta .tagged_as {
    display: block;
    margin-bottom: 0.25rem;
}
.single-product .product_meta a { color: #0d75bd; text-decoration: none; }
.single-product .product_meta a:hover { text-decoration: underline; }

/* ── Add-to-cart area ────────────────────────────────────────────────────── */
.single-product form.cart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin: 1.25rem 0 !important;
    padding: 1.25rem !important;
    background: #f9fafb !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e5e7eb !important;
}
.single-product form.cart .quantity {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}
.single-product form.cart .quantity input.qty {
    width: 3rem !important;
    text-align: center;
    border: none !important;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    padding: 0.55rem 0 !important;
    background: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Add to Cart button */
.woocommerce div.product .single_add_to_cart_button {
    background: #0d75bd !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.7rem 1.75rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s !important;
    white-space: nowrap;
}
.woocommerce div.product .single_add_to_cart_button:hover { background: #0a60a0 !important; }

/* Add to Quote button (plugin) — outlined style to differ from Add to Cart */
.single-product form.cart .single_adq_button_loop,
.single-product form.cart #add_to_quote_loop {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    color: #1a2332 !important;
    border: 2px solid #1a2332 !important;
    border-radius: 0.5rem !important;
    padding: 0.65rem 1.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s !important;
    white-space: nowrap;
}
.single-product form.cart .single_adq_button_loop:hover,
.single-product form.cart #add_to_quote_loop:hover {
    background: #1a2332 !important;
    color: #fff !important;
}
/* Unwrap the span so the button sits flush in the flex row */
.single-product form.cart .single_add_to_quote_loop {
    display: contents;
}

/* ── Tabs section ────────────────────────────────────────────────────────── */
.single-product .woocommerce-tabs {
    margin-top: 2.5rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    padding: 0;
    list-style: none;
    margin-bottom: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 0.65rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: #111827; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #0d75bd;
    border-bottom-color: #0d75bd;
}
.woocommerce div.product .woocommerce-tabs .panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 0.75rem 0.75rem;
    padding: 1.75rem 2rem;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #374151;
}

/* ── Visual Composer shim (legacy [vc_*] pages) ─────────────────────────── */
/* Styling for the lightweight vc_ shortcode handlers in functions.php.
   These pages are mostly stacks of full-width images. */
.dtb-vc-row,
.dtb-vc-column {
    width: 100%;
}
.dtb-vc-image-wrap {
    margin: 0 0 1.25rem;
}
.dtb-vc-image-wrap:last-child {
    margin-bottom: 0;
}
.dtb-vc-image-wrap img,
.dtb-vc-image {
    max-width: 100%;
    height: auto;
    display: block;
}
.dtb-vc-image--center img { margin-left: auto;  margin-right: auto; }
.dtb-vc-image--right  img { margin-left: auto;  margin-right: 0; }
.dtb-vc-image--left   img { margin-left: 0;     margin-right: auto; }
.dtb-vc-text {
    margin-bottom: 1rem;
}

/* ── HR divider before Related Products ─────────────────────────────────── */
/* clear:both — the product gallery/summary above are floated; without the
   clear this hr gets squeezed into the sliver between the two floats. */
.dtb-related-divider {
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 3rem 0 0;
    clear: both;
}

/* ── Related products ────────────────────────────────────────────────────── */
/* clear:both keeps the section (heading + grid together) below the floated
   gallery/summary columns. Without it the heading rides up beside the
   floats while WC core's clear:both on the inner ul drops the grid below
   them — leaving the "Related products" title dangling on its own. */
.single-product .related.products {
    margin-top: 2rem;
    clear: both;
}
.single-product .related.products h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
}
.single-product .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 0;
    list-style: none;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .single-product .woocommerce div.product {
        grid-template-columns: 1fr !important;
    }
    .single-product .woocommerce div.product div.woocommerce-product-gallery,
    .single-product .woocommerce div.product div.summary {
        grid-column: 1 !important;
    }
    .single-product .woocommerce div.product div.summary { grid-row: 2; }
    .single-product form.cart { flex-direction: column; align-items: stretch !important; }
    .single-product form.cart .single_add_to_cart_button,
    .single-product form.cart .single_adq_button_loop { width: 100%; text-align: center; justify-content: center; }
}

/* Cart & Checkout */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; font-size: 0.875rem; }
.woocommerce table.shop_table th { font-weight: 600; color: #374151; background: #f9fafb; }
.woocommerce-cart .cart-collaterals .cart_totals { max-width: 400px; }

/* Checkout */
.woocommerce-checkout .form-row label { font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; display: block; }
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #111827;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus { outline: none; border-color: #0d75bd; box-shadow: 0 0 0 2px rgba(13,117,189,0.2); }
.woocommerce #place_order { background-color: #0d75bd !important; color: #fff !important; font-size: 1rem; font-weight: 700; padding: 0.875rem 2rem !important; border-radius: 0.375rem; }

/* Navigation pagination */
.woocommerce-pagination { margin-top: 2rem; display: flex; justify-content: center; }
.woocommerce-pagination ul { display: flex; gap: 0.25rem; list-style: none; padding: 0; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span { display: block; padding: 0.4rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.25rem; font-size: 0.875rem; color: #374151; text-decoration: none; }
.woocommerce-pagination ul li.woocommerce-pagination__page--current span,
.woocommerce-pagination ul li a:hover { background-color: #1a2332; color: #fff; border-color: #1a2332; }

/* Notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info { padding: 0.75rem 1rem; border-radius: 0.375rem; margin-bottom: 1rem; font-size: 0.875rem; list-style: none; }
.woocommerce-message { background: #f0fdf4; border-left: 4px solid #0d75bd; color: #166534; }
.woocommerce-error  { background: #fef2f2; border-left: 4px solid #f75454; color: #991b1b; }
.woocommerce-info   { background: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }

/* ── Mini cart drawer ────────────────────────────────────────────────────── */

/* Outer wrapper fills the flex-1 content area of the drawer */
.dtb-mini-cart-contents { display: flex; flex-direction: column; height: 100%; }

/* Template's root — also flex-col filling full height */
.dtb-mc-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Scrollable items region */
.dtb-mc-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}
.dtb-mc-scroll::-webkit-scrollbar { width: 4px; }
.dtb-mc-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

/* Item list */
.dtb-mc-list { list-style: none; margin: 0; padding: 0; }

/* Single item row */
.dtb-mc-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
}
.dtb-mc-item:last-child { border-bottom: none; }

/* Remove × button */
.dtb-mc-remove {
    position: absolute;
    top: 1rem;
    right: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.15s;
    padding: 2px;
}
.dtb-mc-remove:hover { color: #ef4444; }

/* Thumbnail */
.dtb-mc-thumb { flex-shrink: 0; }
.dtb-mc-thumb img {
    width: 58px;
    height: 72px;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    display: block;
}

/* Info column */
.dtb-mc-info { flex: 1; min-width: 0; padding-right: 1.25rem; }

.dtb-mc-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
    margin: 0 0 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dtb-mc-name a { color: inherit; text-decoration: none; }
.dtb-mc-name a:hover { color: #0d75bd; }

.dtb-mc-price {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a2332;
    white-space: nowrap;
    margin: 0;
}
.dtb-mc-qty {
    font-weight: 400;
    color: #9ca3af;
}

/* WooCommerce item meta (variation data) */
.dtb-mc-info dl.variation { font-size: 0.72rem; color: #6b7280; margin: 0.25rem 0 0; }
.dtb-mc-info dl.variation dt,
.dtb-mc-info dl.variation dd { display: inline; margin: 0; }
.dtb-mc-info dl.variation dt::after { content: ': '; }
.dtb-mc-info dl.variation dd::after { content: ' '; }

/* Pinned footer */
.dtb-mc-foot {
    flex-shrink: 0;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

/* Subtotal row */
.dtb-mc-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}
.dtb-mc-total-label {
    font-size: 0.82rem;
    color: #6b7280;
    font-weight: 500;
}
.dtb-mc-total-price {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

/* Button row */
.dtb-mc-btns {
    display: flex;
    gap: 0.625rem;
    justify-content: space-between;
}

.dtb-mc-btn {
    flex: 1;
    display: inline-block;
    text-align: center;
    padding: 0.65rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    cursor: pointer;
    line-height: 1.2;
}
.dtb-mc-btn--outline {
    border: 2px solid #1a2332;
    color: #1a2332;
    background: transparent;
}
.dtb-mc-btn--outline:hover {
    background: #1a2332;
    color: #fff;
}
.dtb-mc-btn--primary {
    border: 2px solid #0d75bd;
    background: #0d75bd;
    color: #fff;
}
.dtb-mc-btn--primary:hover {
    background: #0a60a0;
    border-color: #0a60a0;
    color: #fff;
}

/* Also style any WC-default buttons that plugins might inject */
.dtb-mc-btns .button {
    flex: 1;
    text-align: center;
    padding: 0.65rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid #1a2332;
    color: #1a2332;
    background: transparent;
    transition: background 0.18s, color 0.18s;
    display: inline-block;
}
.dtb-mc-btns .button:hover { background: #1a2332; color: #fff; }
.dtb-mc-btns .button.checkout {
    background: #0d75bd; border-color: #0d75bd; color: #fff;
}
.dtb-mc-btns .button.checkout:hover { background: #0a60a0; border-color: #0a60a0; }

/* Empty state */
.dtb-mc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #9ca3af;
}
.dtb-mc-empty svg { opacity: 0.4; margin-bottom: 1rem; }
.dtb-mc-empty p { font-size: 0.875rem; color: #6b7280; margin: 0 0 1.25rem; }
.dtb-mc-empty .dtb-mc-btn { display: inline-block; flex: none; }

/* Breadcrumbs */
.woocommerce-breadcrumb { font-size: 0.75rem; color: #9ca3af; margin-bottom: 1rem; }
.woocommerce-breadcrumb a { color: #6b7280; text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: #0d75bd; }

/* Add to quote button */
.single_add_to_quote_loop { display: block; margin-top: 0.5rem; }
.single_adq_button_loop {
    display: block;
    text-align: center;
    background-color: transparent;
    color: #1a2332;
    border: 2px solid #1a2332;
    border-radius: 0.375rem;
    padding: 0.6rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}
.single_adq_button_loop:hover { background-color: #1a2332; color: #fff; }

/* Prose (page content) */
.prose h1,.prose h2,.prose h3 { font-weight: 700; color: #111827; margin: 1.5rem 0 0.75rem; }
.prose h1 { font-size: 1.75rem; }
.prose h2 { font-size: 1.35rem; }
.prose h3 { font-size: 1.1rem; }
.prose p  { margin-bottom: 1rem; line-height: 1.7; color: #374151; }
.prose a  { color: #0d75bd; text-decoration: underline; }
.prose ul,.prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li  { margin-bottom: 0.25rem; color: #374151; }

/* ── WhatsApp floating action button ─────────────────────────────────────── */
.dtb-wa-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    z-index: 9999;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.dtb-wa-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.dtb-wa-fab--hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}
.dtb-wa-icon {
    width: 30px;
    height: 30px;
    color: #ffffff;
}

/* Utility: line-clamp fallback */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DTB CHECKOUT — Light two-column layout
   Left: order summary (items, coupon, totals)
   Right: billing fields with floating labels + payment methods
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper — matches the header's container mx-auto px-4 py-8 */
.dtb-checkout {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 1536px) {
    .dtb-checkout { max-width: 1536px; }
}

/* Pre-form notices (login, coupons error) */
.dtb-checkout > .woocommerce-NoticeGroup,
.dtb-checkout > .woocommerce-error,
.dtb-checkout > .woocommerce-message,
.dtb-checkout > .woocommerce-info {
    margin-bottom: 1rem;
}

/* Two-column grid — full width, no border/radius container */
.dtb-checkout-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ── LEFT panel ─────────────────────────────────────────────────────────── */

.dtb-checkout-left {
    background: #f4f6f8;
    padding: 2.5rem 2rem;
    border-right: 1px solid #e5e7eb;
}

/* Section header row (title + badge) */
.dtb-co-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.dtb-co-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1.5rem;
    letter-spacing: -0.01em;
}

.dtb-co-section-header .dtb-co-title {
    margin-bottom: 0;
}

.dtb-co-badge {
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    letter-spacing: 0.02em;
}

/* ── Cart items ─────────────────────────────────────────────────────────── */

.dtb-co-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dtb-co-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.dtb-co-item:last-child {
    border-bottom: none;
}

.dtb-co-item-img {
    position: relative;
    flex-shrink: 0;
    width: 62px;
    height: 78px;
}

.dtb-co-item-img img.dtb-co-item-thumb,
.dtb-co-item-img img {
    width: 62px !important;
    height: 78px !important;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    display: block;
}

.dtb-co-item-qty {
    position: absolute;
    top: -7px;
    right: -7px;
    background: #0d75bd;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dtb-co-item-info {
    flex: 1;
    min-width: 0;
}

.dtb-co-item-name {
    font-size: 0.83rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.25rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dtb-co-item-meta,
.dtb-co-item-meta dl,
.dtb-co-item-meta dt,
.dtb-co-item-meta dd,
.dtb-co-item-meta p {
    font-size: 0.71rem;
    color: #6b7280;
    margin: 0;
    display: inline;
}

.dtb-co-item-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Totals block ───────────────────────────────────────────────────────── */

.dtb-co-totals {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.dtb-co-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0;
    font-size: 0.875rem;
    color: #374151;
}

.dtb-co-total-row > span { display: block; }

.dtb-co-discount { color: #16a34a; }
.dtb-co-discount .dtb-co-coupon-val a { color: #dc2626; font-size: 0.75rem; }

.dtb-co-tax-note {
    text-align: right;
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 400;
    padding-bottom: 0.25rem;
}

/* Shipping method — button toggle style */
.dtb-co-shipping-row { align-items: flex-start; margin-top: 20px; }
.dtb-co-shipping-methods { text-align: right; }

/* WooCommerce outputs cart-shipping.php as a <tr>/<th>/<td> — flatten it and hide the package label */
.dtb-co-shipping-methods tr { display: block; }
.dtb-co-shipping-methods th { display: none; }
.dtb-co-shipping-methods td { display: block; padding: 0; border: none; }

.dtb-co-shipping-methods #shipping_method {
    list-style: none;
    margin: 0px;
    margin-top: 20px !important;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.dtb-co-shipping-methods #shipping_method li { margin: 0; }

/* Hide radio input but keep it functional so WC events still fire */
.dtb-co-shipping-methods #shipping_method input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Label as pill button */
.dtb-co-shipping-methods #shipping_method label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: 2px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: #374151;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.dtb-co-shipping-methods #shipping_method label:hover {
    border-color: #0d75bd;
    color: #0d75bd;
}

/* Active / selected state */
.dtb-co-shipping-methods #shipping_method input[type="radio"]:checked + label {
    border-color: #0d75bd;
    background: #eff6ff;
    color: #0d75bd;
    font-weight: 600;
}


.dtb-co-total-grand {
    border-top: 1px solid #d1d5db;
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.dtb-co-total-grand .woocommerce-Price-amount {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

/* ── Coupon input ───────────────────────────────────────────────────────── */

.dtb-co-coupon {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.dtb-co-coupon .checkout_coupon,
.dtb-co-coupon .woocommerce-form-coupon {
    display: flex !important;
    gap: 0.5rem;
    align-items: stretch;
    margin: 0 !important;
}

.dtb-co-coupon .form-row {
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
}

.dtb-co-coupon input[type="text"] {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.4rem !important;
    color: #111827 !important;
    font-size: 0.85rem !important;
    padding: 0.7rem 0.875rem !important;
    outline: none !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.dtb-co-coupon input[type="text"]::placeholder { color: #9ca3af; }
.dtb-co-coupon input[type="text"]:focus { border-color: #0d75bd !important; }

.dtb-co-coupon button[type="submit"],
.dtb-co-coupon .button {
    background: #0d75bd !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.4rem !important;
    padding: 0.7rem 1.25rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
    line-height: 1 !important;
    height: auto !important;
}

.dtb-co-coupon button[type="submit"]:hover,
.dtb-co-coupon .button:hover { background: #0a60a0 !important; }

/* ── RIGHT panel ─────────────────────────────────────────────────────────── */

.dtb-checkout-right {
    background: #ffffff;
    padding: 2.5rem 2rem;
}

/* Hide WC's default section headings — our dtb-co-title replaces them */
.dtb-checkout .woocommerce-billing-fields > h3,
.dtb-checkout .woocommerce-shipping-fields > h3,
.dtb-checkout .woocommerce-additional-fields > h3 {
    display: none;
}

/* ── Floating-label form rows ─────────────────────────────────────────────
   WooCommerce places <label> BEFORE <input>, so floating state is driven by
   JavaScript (.is-focused / .has-value classes on the .form-row wrapper).
   ──────────────────────────────────────────────────────────────────────── */

.dtb-checkout .form-row {
    position: relative;
    margin-bottom: 1.75rem !important;
    padding: 0 !important;
    clear: none;
}

/* Two-column field pairs inside the billing wrapper */
.dtb-checkout .woocommerce-billing-fields__field-wrapper,
.dtb-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.dtb-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.dtb-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
    margin-bottom: 0 !important;
}

.dtb-checkout .form-row.form-row-wide {
    grid-column: 1 / -1;
    float: none !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.dtb-checkout .form-row.form-row-first,
.dtb-checkout .form-row.form-row-last {
    float: none !important;
    width: 100% !important;
    clear: none !important;
    margin-bottom: 10px !important;
}

/* ── Labels ─────────────────────────────────────────────────────────────── */

.dtb-checkout .form-row > label:not(.woocommerce-form__label-for-checkbox) {
    position: absolute;
    top: 0.95rem;
    left: 0.9rem;
    font-size: 0.85rem;
    color: #6b7280;
    pointer-events: none;
    transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease;
    background: transparent;
    z-index: 2;
    line-height: 1;
    white-space: nowrap;
    max-width: calc(100% - 1.8rem);
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.dtb-checkout .form-row > label .required { color: #e53e3e; }

/* Float up when focused or has value */
.dtb-checkout .form-row.is-focused > label:not(.woocommerce-form__label-for-checkbox),
.dtb-checkout .form-row.has-value > label:not(.woocommerce-form__label-for-checkbox) {
    top: -1.5px;
    font-size: 0.77rem;
    color: #0d75bd;
    background: #ffffff;
    padding: 0 0.3rem;
    left: 0.75rem;
    max-width: none;
    font-weight: bold;
}

/* ── Input / select / textarea fields ──────────────────────────────────── */

.dtb-checkout .form-row input[type="text"],
.dtb-checkout .form-row input[type="email"],
.dtb-checkout .form-row input[type="tel"],
.dtb-checkout .form-row input[type="password"],
.dtb-checkout .form-row input[type="number"],
.dtb-checkout .form-row select {
    width: 100% !important;
    background: #ffffff !important;
    border: 2px solid #eeeeee !important;
    border-radius: 0.5rem !important;
    padding: 1.1rem 0.9rem 0.45rem !important;
    font-size: 0.875rem !important;
    color: #111827 !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    height: 3.25rem !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
}

.dtb-checkout .form-row textarea {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    padding: 1.5rem 0.9rem 0.6rem !important;
    font-size: 0.875rem !important;
    color: #111827 !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    height: auto !important;
    min-height: 5.5rem !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    display: block !important;
    resize: vertical;
}

.dtb-checkout .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.85rem center !important;
    padding-right: 2.25rem !important;
    cursor: pointer;
}

.dtb-checkout .form-row input:focus,
.dtb-checkout .form-row select:focus,
.dtb-checkout .form-row textarea:focus {
    border-color: #0d75bd !important;
    box-shadow: 0 0 0 2px rgba(13,117,189,0.15) !important;
}

/* Validation states */
.dtb-checkout .form-row.woocommerce-invalid input,
.dtb-checkout .form-row.woocommerce-invalid select,
.dtb-checkout .form-row.woocommerce-invalid textarea {
    border-color: #e53e3e !important;
}

.dtb-checkout .form-row.woocommerce-invalid > label:not(.woocommerce-form__label-for-checkbox) {
    color: #e53e3e !important;
}

.dtb-checkout .form-row.woocommerce-invalid.is-focused > label:not(.woocommerce-form__label-for-checkbox),
.dtb-checkout .form-row.woocommerce-invalid.has-value > label:not(.woocommerce-form__label-for-checkbox) {
    background: #ffffff;
}

/* WooCommerce wraps input in a span — ensure it displays correctly */
.dtb-checkout .form-row .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

/* Checkboxes (create account, ship to different address) */
.dtb-checkout .form-row-checkbox label,
.dtb-checkout .form-row label.woocommerce-form__label-for-checkbox {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem !important;
    color: #374151 !important;
    cursor: pointer;
    background: transparent !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
}

.dtb-checkout .form-row input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: #0d75bd;
    flex-shrink: 0;
    padding: 0 !important;
}

/* Ship to different address toggle */
.dtb-checkout .ship-to-different-address {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

/* ── Payment section ─────────────────────────────────────────────────────── */

#order_review.woocommerce-checkout-review-order {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.dtb-checkout #payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Payment method list */
.dtb-checkout #payment ul.payment_methods,
.dtb-checkout #payment ul.wc_payment_methods {
    list-style: none !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.dtb-checkout #payment li.payment_method,
.dtb-checkout #payment li.wc_payment_method {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.7rem !important;
    margin-bottom: 0.5rem !important;
    background: #f9fafb !important;
    padding: 0.9rem 1rem !important;
    gap: 0.75rem;
    transition: border-color 0.15s;
}

/* Active/selected payment method */
.dtb-checkout #payment li.payment_method:has(input[type="radio"]:checked),
.dtb-checkout #payment li.wc_payment_method:has(input[type="radio"]:checked) {
    border-color: #0d75bd !important;
    background: #f0f8ff !important;
}

.dtb-checkout #payment li.payment_method > label,
.dtb-checkout #payment li.wc_payment_method > label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0 !important;
    cursor: pointer;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    position: static !important;
    background: transparent !important;
    top: auto !important;
    left: auto !important;
}

/* No pointer when the method is already selected */
.dtb-checkout #payment li.payment_method:has(input[type="radio"]:checked) > label,
.dtb-checkout #payment li.wc_payment_method:has(input[type="radio"]:checked) > label {
    cursor: default;
}

.dtb-checkout #payment li input[type="radio"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: #0d75bd;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
}

/* Payment icons */
.dtb-checkout #payment li label img {
    height: 22px !important;
    width: auto !important;
    object-fit: contain;
    vertical-align: middle;
}

/* Description box — sits on its own line below the radio + label row */
.dtb-checkout #payment .payment_box {
    flex-basis: 100% !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 0.75rem !important;
    font-size: 0.82rem !important;
    color: #374151 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.dtb-checkout #payment .payment_box p { color: #374151; font-size: 0.82rem; margin-bottom: 0.5rem; }
.dtb-checkout #payment .payment_box a { color: #0d75bd; }

/* Place order button */
.dtb-checkout #payment .form-row.place-order {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dtb-checkout #payment #place_order {
    width: 100% !important;
    background: #0d75bd !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    display: block !important;
    text-align: center !important;
    margin-top: 0.75rem !important;
    height: auto !important;
    box-shadow: none !important;
}

.dtb-checkout #payment #place_order:hover { background: #0a60a0 !important; }

/* Terms & privacy */
.dtb-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0.75rem 0 0.5rem;
}

.dtb-checkout .woocommerce-terms-and-conditions-wrapper a { color: #0d75bd; text-decoration: none; }
.dtb-checkout .woocommerce-terms-and-conditions-wrapper a:hover { text-decoration: underline; }

.dtb-checkout .woocommerce-privacy-policy-text {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.dtb-checkout .woocommerce-privacy-policy-text a { color: #0d75bd; }

/* Postal / postcode field — hidden by default */
.dtb-checkout #billing_postcode_field,
.dtb-checkout #shipping_postcode_field {
    display: none !important;
}

/* Country field label — hidden since the field is read-only (fixed to South Africa) */
.dtb-checkout #billing_country_field > label,
.dtb-checkout #shipping_country_field > label {
    display: none !important;
}

/* ── Notices inside checkout form ───────────────────────────────────────── */

.dtb-checkout .woocommerce-NoticeGroup { margin-bottom: 1rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .dtb-checkout-inner {
        grid-template-columns: 1fr;
    }

    .dtb-checkout-left {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding: 1.75rem 1.25rem;
    }

    .dtb-checkout-right {
        padding: 1.75rem 1.25rem;
    }

    .dtb-checkout .woocommerce-billing-fields__field-wrapper,
    .dtb-checkout .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    .dtb-checkout .form-row.form-row-wide {
        grid-column: 1;
    }
}

@media (max-width: 480px) {
    .dtb-checkout-left,
    .dtb-checkout-right { padding: 1.25rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Quote List Form  (/quote-list/)  — mirrors checkout field styling          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer form (high specificity to beat WooCommerce defaults) ─────────── */
form.checkout.adq-billing {
    width: 100% !important;
    max-width: none !important;
    margin: 2rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    clear: both !important;  /* clears the "Total: float:right" h2 from adq-list.php */
}

/* Inner billing-fields div also carries adq-billing class — reset it */
.woocommerce-billing-fields.adq-billing {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Billing fields grid (mirrors main checkout) ──────────────────────────
   The quote template renders fields directly in this div with no
   __field-wrapper, so WooCommerce's float-based form-row-first/last were
   never cleared: wide rows (company, address…) overlapped the floated
   name fields, covering them and making them unclickable. A grid container
   ignores floats entirely, so every row stacks correctly. */
.woocommerce-billing-fields.adq-billing {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 1rem !important;
}

/* Headings, notices and wide fields span the full row */
.woocommerce-billing-fields.adq-billing > * {
    grid-column: 1 / -1;
}

/* First/Last name (and any -first/-last pair) sit side by side */
form.checkout.adq-billing .form-row.form-row-first,
form.checkout.adq-billing .form-row.form-row-last {
    grid-column: auto !important;
    float: none !important;
    width: 100% !important;
    clear: none !important;
}

/* ── Single-column layout (right col-2 removed; shipping + comment now
      render inside .col-1 via the adq_quote_list_after hook) ─────────────── */
form.checkout.adq-billing .col2-set {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    align-items: start !important;
}

/* WC clearfix pseudo-elements become unwanted grid items — remove them */
form.checkout.adq-billing .col2-set::before,
form.checkout.adq-billing .col2-set::after {
    content: none !important;
    display: none !important;
}

/* Columns — float: none overrides WooCommerce .col-1 { float:left; width:48% } */
form.checkout.adq-billing .col2-set .col-1,
form.checkout.adq-billing .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.75rem 1.5rem;
    box-sizing: border-box;
}

/* Section headings */
form.checkout.adq-billing .col-1 h3,
form.checkout.adq-billing .col-2 h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
}

/* ── Form row base ───────────────────────────────────────────────────────── */
form.checkout.adq-billing .form-row {
    position: relative;
    margin-bottom: 1.75rem !important;
    padding: 0 !important;
    clear: none;
}

/* ── Floating label ──────────────────────────────────────────────────────── */
form.checkout.adq-billing .form-row > label:not(.woocommerce-form__label-for-checkbox) {
    position: absolute;
    top: 0.95rem;
    left: 0.9rem;
    font-size: 0.85rem;
    color: #6b7280;
    pointer-events: none;
    transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease;
    background: transparent;
    z-index: 2;
    line-height: 1;
    white-space: nowrap;
    max-width: calc(100% - 1.8rem);
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
form.checkout.adq-billing .form-row > label .required { color: #e53e3e; }

form.checkout.adq-billing .form-row.is-focused > label:not(.woocommerce-form__label-for-checkbox),
form.checkout.adq-billing .form-row.has-value  > label:not(.woocommerce-form__label-for-checkbox) {
    top: -1.5px;
    font-size: 0.77rem;
    color: #0d75bd;
    background: #ffffff;
    padding: 0 0.3rem;
    left: 0.75rem;
    max-width: none;
    font-weight: bold;
}

/* ── Inputs / select ─────────────────────────────────────────────────────── */
form.checkout.adq-billing .form-row input[type="text"],
form.checkout.adq-billing .form-row input[type="email"],
form.checkout.adq-billing .form-row input[type="tel"],
form.checkout.adq-billing .form-row input[type="password"],
form.checkout.adq-billing .form-row input[type="number"],
form.checkout.adq-billing .form-row select {
    width: 100% !important;
    background: #ffffff !important;
    border: 2px solid #eeeeee !important;
    border-radius: 0.5rem !important;
    padding: 1.1rem 0.9rem 0.45rem !important;
    font-size: 0.875rem !important;
    color: #111827 !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    height: 3.25rem !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
}

form.checkout.adq-billing .form-row textarea {
    width: 100% !important;
    background: #ffffff !important;
    border: 2px solid #eeeeee !important;
    border-radius: 0.5rem !important;
    padding: 1.1rem 0.9rem 0.6rem !important;
    font-size: 0.875rem !important;
    color: #111827 !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    min-height: 6rem !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    display: block !important;
}

form.checkout.adq-billing .form-row input:focus,
form.checkout.adq-billing .form-row select:focus,
form.checkout.adq-billing .form-row textarea:focus {
    border-color: #0d75bd !important;
    box-shadow: 0 0 0 3px rgba(13,117,189,0.12) !important;
}

/* ── Section divider between billing fields and shipping options ────────── */
form.checkout.adq-billing hr.adq-section-divider {
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 0.25rem 0 1.5rem;
}

/* ── Shipping options (inside .col-1, after email) ────────────────────────
   adq-cart-shipping.php outputs a <table><tr><th>/<td> — flatten it. */
form.checkout.adq-billing .adq-shipping table {
    width: 100%;
    border: none;
    margin: 0;
}
form.checkout.adq-billing .adq-shipping tr.shipping { display: block; }
form.checkout.adq-billing .adq-shipping th {
    display: block;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1rem;
}
form.checkout.adq-billing .adq-shipping td {
    display: block;
    padding: 0;
    border: none;
}

/* Radio list as pill buttons (mirrors main checkout) */
form.checkout.adq-billing .adq-shipping #shipping_method {
    list-style: none;
    margin: 0 0 0.5rem !important;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
form.checkout.adq-billing .adq-shipping #shipping_method li { margin: 0; }

/* Hide radio input but keep it functional */
form.checkout.adq-billing .adq-shipping #shipping_method input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

form.checkout.adq-billing .adq-shipping #shipping_method label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.1rem;
    border: 2px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
form.checkout.adq-billing .adq-shipping #shipping_method label:hover {
    border-color: #0d75bd;
    color: #0d75bd;
}
form.checkout.adq-billing .adq-shipping #shipping_method input[type="radio"]:checked + label {
    border-color: #0d75bd;
    background: #eff6ff;
    color: #0d75bd;
    font-weight: 600;
}

/* ── Comment / notes row ─────────────────────────────────────────────────── */
form.checkout.adq-billing .form-row.notes > label {
    position: static !important;
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.4rem;
}

/* ── Terms checkbox ──────────────────────────────────────────────────────── */
form.checkout.adq-billing .form-row.terms {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem !important;
}
form.checkout.adq-billing .form-row.terms label {
    font-size: 0.82rem;
    color: #374151;
    position: static !important;
}

/* ── Submit + back buttons ───────────────────────────────────────────────── */
#quote_place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0d75bd !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.85rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background 0.2s !important;
    text-decoration: none;
}
#quote_place_order:hover { background: #0a60a0 !important; }
#quote_place_order:disabled { opacity: 0.6; cursor: not-allowed !important; }

/* Loading overlay — replaces the hidden submit button */
.dtb-btn-loading-overlay {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #0d75bd;
    color: #ffffff;
    border-radius: 0.5rem;
    padding: 0.85rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    pointer-events: none;
    vertical-align: middle;
    cursor: not-allowed;
}

@keyframes dtb-spin {
    to { transform: rotate(360deg); }
}
.dtb-spin {
    animation: dtb-spin 0.8s linear infinite;
}

form.checkout.adq-billing .return-to-shop {
    display: inline-flex;
    align-items: center;
    background: transparent !important;
    color: #374151 !important;
    border: 2px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-left: 0.75rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s !important;
}
form.checkout.adq-billing .return-to-shop:hover {
    border-color: #374151 !important;
    color: #111827 !important;
}

/* ── Country field label — always hidden (read-only) ─────────────────────── */
form.checkout.adq-billing #billing_country_field > label { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    form.checkout.adq-billing .col2-set { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    form.checkout.adq-billing .col2-set .col-1,
    form.checkout.adq-billing .col2-set .col-2 { padding: 1.25rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Order Pay Page                                                              */
/* ═══════════════════════════════════════════════════════════════════════════ */

.dtb-order-pay-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.dtb-order-pay-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.dtb-order-pay-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a2332;
    margin: 0;
    line-height: 1.2;
}

/* ── Order summary card ──────────────────────────────────────────────────── */
.dtb-order-summary-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.dtb-order-meta {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dtb-order-meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 9px 0;
    border-bottom: 1px solid #e5e7eb;
}

.dtb-order-meta li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dtb-order-meta li span {
    color: #6b7280;
}

.dtb-order-meta li strong {
    color: #1a2332;
    font-weight: 600;
}

.dtb-order-meta li .dtb-order-total {
    font-size: 1rem;
    color: #1073be;
}

/* ── Payment action area ─────────────────────────────────────────────────── */
.dtb-order-pay-action {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
}

.dtb-order-pay-action .iveri-intro {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 20px;
    line-height: 1.5;
}

/* ── Hide the WC default order_details list (replaced by dtb-order-summary-card) */
.woocommerce-order-pay ul.order_details {
    display: none !important;
}