/* Homepage WP Bakery Post Grid - equal height cards & button alignment */
body.home .vc_grid .vc_pageable-slide-wrapper.vc_clearfix {
    display: flex;
    flex-wrap: wrap;
}

body.home .vc_grid .vc_pageable-slide-wrapper.vc_clearfix>.vc_clearfix:not(.vc_grid-item) {
    display: none;
}

body.home .vc_grid .vc_grid-item.vc_clearfix.vc_col-sm-4 {
    display: flex;
    flex-direction: column;
}

body.home .vc_grid .vc_grid-item.vc_clearfix.vc_col-sm-4>.vc_grid-item-mini {
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.home .vc_grid .vc_grid-item .vc_gitem-zone-c {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.home .vc_grid .vc_gitem-zone-c .vc_gitem-zone-mini,
body.home .vc_grid .vc_gitem-zone-c .vc_gitem_row,
body.home .vc_grid .vc_gitem-zone-c .vc_gitem-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.home .vc_grid .vc_gitem-zone-c .vc_btn3-container {
    margin-top: auto;
}

/* Reduce stacked margins in homepage post grid */
body.home .vc_grid .vc_gitem-post-data-source-post_title {
    margin-bottom: 0;
}

body.home .vc_grid .vc_gitem-post-data-source-post_title h4 {
    margin-bottom: 10px;
}

body.home .vc_grid .vc_gitem-post-data-source-post_excerpt {
    margin-bottom: 0;
}

body.home .vc_grid .vc_gitem-post-data-source-post_excerpt>p:empty {
    display: none;
}

/* Post Grid image ratio 388:258 - homepage only */
.home .vc-gitem-zone-height-mode-auto.vc-gitem-zone-height-mode-auto-1-1:before {
    padding-top: 66.49% !important;
}

/* Blog Grid design - equal height rows */
.blog-grid-row {
    display: flex;
    flex-wrap: wrap;
}

.blog-grid-row .blog-design-grid {
    display: flex;
    margin-bottom: 30px;
}

.blog-grid-row .blog-design-grid .article-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-grid-row .blog-design-grid .article-body-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-grid-row .blog-design-grid .article-body-container .entry-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-grid-row .blog-design-grid .article-body-container .read-more-section {
    margin-top: auto;
    padding-top: 1rem;
}

.blog-grid-row .blog-design-grid .hovered-social-icons {
    display: none;
}

.blog-grid-row .blog-design-grid .post-img-wrapp {
    position: relative;
    padding-top: 66.49%;
    /* 258/388 */
    overflow: hidden;
}

.blog-grid-row .blog-design-grid .post-img-wrapp a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.blog-grid-row .blog-design-grid .post-img-wrapp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Home page WP Bakery Post Grid: date badge ── */
/* Match the Woodmart blog date badge (.woodmart-post-date) style */
.od-home-blog-grid-item .od-home-blog-post-date {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    min-width: 53px;
    background-color: #FFF;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.1);
    color: #333;
    text-align: center;
    line-height: 1;
    padding: 0;
}

.od-home-blog-grid-item .od-home-blog-post-date .post-date-day {
    display: block;
    padding-top: 6px;
    padding-bottom: 4px;
    font-size: 24px;
}

.od-home-blog-grid-item .od-home-blog-post-date .post-date-month {
    display: block;
    padding-top: 2px;
    padding-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-weight: 600;
    font-size: 12px;
}

/* ── Blog listing: center pagination ── */
.d-blog-main-wrapper + .blog-footer {
    width: 100%;
    margin-top: 2em;
}

/* ── Single post: Return to Blog Home link ── */
.return-to-blog {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: #888;
    text-decoration: none;
    text-align: left;
}
.return-to-blog:hover {
    color: #333;
    text-decoration: underline;
}

/* ── Blog listing: search bar + per-page dropdown row ── */
.d-blog-search-row {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 1.5em;
    padding-left: 0;
    padding-right: 0;
}

.d-blog-search-group {
    flex: 1;
    min-width: 0;
}

/* Bootstrap input-group component CSS is not loaded on this site,
   so we provide the flex layout for the search input + button inline. */
.d-blog-search-row .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.d-blog-search-row .input-group .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 44px;
    padding: 8px 16px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    outline: none;
    transition: border-color 0.2s;
}

.d-blog-search-row .input-group .form-control:focus {
    border-color: #008000;
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.1);
}

.d-blog-search-row .input-group .input-group-append {
    display: flex;
}

/* Search button — site primary green, clean design */
.d-blog-search-row .input-group .input-group-append .btn {
    white-space: nowrap;
    height: 44px;
    padding: 0 16px;
    background-color: #008000;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid #008000;
    border-left: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.d-blog-search-row .input-group .input-group-append .btn:hover {
    background-color: #006a00;
    border-color: #006a00;
}

.d-blog-per-page-group {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.d-blog-per-page-group label {
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
}

.d-blog-per-page-group select {
    height: 44px;
    min-width: 70px;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s;
}

.d-blog-per-page-group select:focus {
    border-color: #008000;
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.1);
}

@media (max-width: 767px) {
    .d-blog-search-row {
        flex-wrap: wrap;
    }
    .d-blog-search-group,
    .d-blog-per-page-group {
        width: 100%;
    }
}

/* ── Knowledge Base search: form + results list ── */
.d-kb-search-row {
    margin-bottom: 1.5em;
}

/* Bootstrap input-group component CSS is not loaded on this site,
   so we provide the flex layout for the search input + button inline. */
.d-kb-search-group .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.d-kb-search-group .input-group .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
    padding: 8px 16px;
    font-size: 14px;
    /* Woodmart's global input[type=search] rule forces color:#FFF,
       background:transparent, border:2px, border-radius:0 — override here. */
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.d-kb-search-group .input-group .form-control:focus {
    border-color: #008000;
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.1);
}

.d-kb-search-group .input-group .input-group-append {
    display: flex;
}

.d-kb-search-group .input-group .input-group-append .btn {
    white-space: nowrap;
    height: 44px;
    padding: 0 22px;
    background-color: #008000;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid #008000;
    border-left: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.d-kb-search-group .input-group .input-group-append .btn:hover,
.d-kb-search-group .input-group .input-group-append .btn:focus {
    background-color: #006a00;
    border-color: #006a00;
    outline: none;
}

/* Results list */
.d-kb-search-summary {
    margin: 0 0 1em;
    color: #555;
    font-size: 14px;
}

.d-kb-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.d-kb-result {
    padding: 18px 0;
    border-bottom: 1px solid #eee;
}

.d-kb-result:last-child {
    border-bottom: 0;
}

.d-kb-result-breadcrumb {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.d-kb-result-breadcrumb a {
    color: #777;
}

.d-kb-result-title {
    font-size: 18px;
    margin: 0 0 6px;
}

.d-kb-result-title a {
    color: #004c11;
}

.d-kb-result-title a:hover {
    color: #008000;
}

.d-kb-result-excerpt {
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

.d-kb-result mark {
    background: #fff2a8;
    padding: 0 2px;
    color: inherit;
}

/* No-results state */
.d-kb-no-results {
    padding: 30px 0;
    margin-bottom: 40px;
    color: #555;
}

/* Breathing room between the results list and the Contact Us form below
   when there's no pagination (single page of results). */
.d-kb-results {
    margin-bottom: 40px;
}

/* Pagination */
.d-kb-pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px 0 40px;
}

.d-kb-pagination a,
.d-kb-pagination span {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.d-kb-pagination a:hover {
    background: #f4f4f4;
}

.d-kb-pagination a:focus {
    outline: none;
    border-color: #008000;
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.2);
}

.d-kb-pagination .current {
    background: #008000;
    color: #fff;
    border-color: #008000;
}

.d-kb-pagination span.d-kb-pagination-ellipsis {
    border: 0;
    background: transparent;
    cursor: default;
}

@media (max-width: 767px) {
    /* Horizontal page padding. Woodmart's stripped-down Bootstrap omits
       padding on .col-md-* columns, so content in .d-main-content hugs
       the viewport edge on narrow screens. Restore 15px gutters here. */
    .d-main-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Search button: tighter padding so the input has more room */
    .d-kb-search-group .input-group .input-group-append .btn {
        padding: 0 14px;
    }

    /* Result summary: slightly smaller, tighter */
    .d-kb-search-summary {
        font-size: 13px;
        margin-bottom: 0.75em;
    }

    /* Result rows: a bit less vertical padding, keep dividers */
    .d-kb-result {
        padding: 14px 0;
    }

    /* Title scales down — long titles still wrap cleanly on narrow screens */
    .d-kb-result-title {
        font-size: 16px;
        line-height: 1.35;
    }

    /* Breadcrumb: hide the uppercase/letterspacing treatment on mobile
       where horizontal room is tight; still show the path so the user
       knows which section a result belongs to. */
    .d-kb-result-breadcrumb {
        letter-spacing: 0;
        font-size: 11px;
    }

    /* Pagination: bigger tap targets (≥44px tall) */
    .d-kb-pagination {
        gap: 8px;
        margin-bottom: 30px;
    }
    .d-kb-pagination a,
    .d-kb-pagination span {
        padding: 10px 14px;
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Checkout order summary shipping method list
 * -------------------------------------------
 * Layout: reset list/label spacing and size so everything aligns with the
 * surrounding order summary rows.
 * Styling: real calculated rates render bold + green (theme accent). The
 * "preferred courier" fallback instances render as plain body text to match
 * WooCommerce's native "no shipping options available" styling — they are
 * not a calculated rate, just an instruction to the customer. */
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li label,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li .amount {
    font-size: inherit;
    line-height: inherit;
    text-align: inherit;
    margin: 0;
    padding: 0;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li {
    margin-bottom: 6px;
}

.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li:last-child {
    margin-bottom: 0;
}

/* Default: available/calculated rates shown bold + green */
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li label,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li .amount {
    color: #008000;
    font-weight: 700;
}

/* "Preferred courier" fallback instances (8, 9, 17): render as plain body
 * text, consistent with the "no shipping options" default appearance. */
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li:has(input[value="free_shipping:8"]) label,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li:has(input[value="free_shipping:9"]) label,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li:has(input[value="free_shipping:17"]) label,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li:has(input[value="free_shipping:8"]) .amount,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li:has(input[value="free_shipping:9"]) .amount,
.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li:has(input[value="free_shipping:17"]) .amount {
    color: inherit;
    font-weight: normal;
}

/* "Ships from Seattle" line under the product stock text.
   Tighten the gap above the line, and move the stock's original 20px margin
   below the line so it clears the quantity / add-to-cart box. */
.od-ships-from {
    display: block;
    margin-bottom: 20px;
}
.stock:has(+ .od-ships-from) {
    margin-bottom: 4px;
}

/* When the SKU links to a datasheet, style it exactly like the site's content
   links (e.g. the "Contact us" link): blue at rest, green on hover, never
   underlined. A plain-text SKU (no datasheet) is unaffected. */
.product_meta .sku a {
    color: rgba(0, 61, 216, 0.98);
    text-decoration: none;
}
.product_meta .sku a:hover {
    color: #008000;
    text-decoration: none;
}

/* ---- Checkout: postal code <-> city/state soft warning -------------------- */
/* Advisory (not a hard error): amber, clearly visible beneath the postcode
   input, for both billing and shipping. Rendered as a block-level <span> so it
   stays valid inside WooCommerce's <p class="form-row"> field wrapper. The
   region is persistent (role="status") and hidden while empty, so screen
   readers announce text injected into it. */
.od-postcode-warning:empty {
    display: none;
}
.od-postcode-warning {
    display: block;
    clear: both;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid #f0c36d;
    border-left: 4px solid #e6a817;
    border-radius: 3px;
    background: #fff8e6;
    color: #7a5900;
    font-size: 13px;
    line-height: 1.45;
}
.od-postcode-warning strong {
    color: #5c4400;
    font-weight: 600;
}
@media (max-width: 768px) {
    .od-postcode-warning {
        font-size: 12px;
        padding: 8px 10px;
    }
}

/* ============================================================================
 * AJAX search — wider suggestions dropdown so product SKUs fit on one line.
 * The visible dropdown is .woodmart-scroll (absolutely positioned inside
 * .search-results-wrapper). Symmetric negative offsets widen it while keeping
 * it centred on the search input, so it never runs past the viewport edges.
 * Desktop only; the mobile / tablet dropdown stays full-width as-is.
 * ============================================================================ */
@media (min-width: 1025px) {
    .whb-column .woodmart-search-form .search-results-wrapper .woodmart-scroll {
        left: -90px;
        right: -90px;
    }
}

/* Keep each product SKU on a single line. */
.woodmart-search-form .autocomplete-suggestion .suggestion-sku {
    white-space: nowrap;
}

/* SKU match highlight — same treatment as the product-name match: bold + underline.
 * (Mirrors the parent theme's .suggestion-title strong rule; the <strong> comes
 * from the JS highlighter in custom-1-0-15.js.) */
.autocomplete-suggestion .suggestion-sku strong {
    font-weight: 700;
    text-decoration: underline;
}

/* od 2026-07-24: constrain legacy BoldGrid .mod-reset content images. The boldgrid-primas
   theme that sized these was dropped in the WooDmart cutover; .mod-reset is used on no active
   WooDmart component (only 5 legacy /our-products/* pages), so this scoped cap is collision-free. */
.mod-reset img.size-full { max-width: min(480px, 100%); height: auto; display: block; margin-inline: auto; }

/* od 2026-07-25: restore Bootstrap-3 grid for legacy BoldGrid /our-products/* pages.
   The grid framework (.row/.col-*) that laid these product galleries out 4-up was
   dropped in the WooDmart 8.5.5 cutover, so every .col-* collapsed to full width and
   products stacked one-per-row at the 480px cap ("images still large"). This is the
   authentic Bootstrap-3 float grid, SCOPED to .boldgrid-section so it cannot collide
   with WooDmart's own .col-md-* usage (e.g. KB search results in .d-main-content, see
   note ~line 470). Float (not flex) is deliberate: two legacy rows contain a bare <p>
   directly inside .row, which flex would turn into a broken column. */
.boldgrid-section .row {
    margin-left: -15px;
    margin-right: -15px;
}
.boldgrid-section .row::before,
.boldgrid-section .row::after {
    content: " ";
    display: table;
}
.boldgrid-section .row::after {
    clear: both;
}
.boldgrid-section .row > [class*="col-"] {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* xs tier (default, all widths) */
.boldgrid-section .row > [class*="col-xs-"] { float: left; }
.boldgrid-section .col-xs-12 { width: 100%; }
.boldgrid-section .col-xs-11 { width: 91.66666667%; }
.boldgrid-section .col-xs-10 { width: 83.33333333%; }
.boldgrid-section .col-xs-9  { width: 75%; }
.boldgrid-section .col-xs-8  { width: 66.66666667%; }
.boldgrid-section .col-xs-7  { width: 58.33333333%; }
.boldgrid-section .col-xs-6  { width: 50%; }
.boldgrid-section .col-xs-5  { width: 41.66666667%; }
.boldgrid-section .col-xs-4  { width: 33.33333333%; }
.boldgrid-section .col-xs-3  { width: 25%; }
.boldgrid-section .col-xs-2  { width: 16.66666667%; }
.boldgrid-section .col-xs-1  { width: 8.33333333%; }

/* sm tier (>=768px) */
@media (min-width: 768px) {
    .boldgrid-section .row > [class*="col-sm-"] { float: left; }
    .boldgrid-section .col-sm-12 { width: 100%; }
    .boldgrid-section .col-sm-11 { width: 91.66666667%; }
    .boldgrid-section .col-sm-10 { width: 83.33333333%; }
    .boldgrid-section .col-sm-9  { width: 75%; }
    .boldgrid-section .col-sm-8  { width: 66.66666667%; }
    .boldgrid-section .col-sm-7  { width: 58.33333333%; }
    .boldgrid-section .col-sm-6  { width: 50%; }
    .boldgrid-section .col-sm-5  { width: 41.66666667%; }
    .boldgrid-section .col-sm-4  { width: 33.33333333%; }
    .boldgrid-section .col-sm-3  { width: 25%; }
    .boldgrid-section .col-sm-2  { width: 16.66666667%; }
    .boldgrid-section .col-sm-1  { width: 8.33333333%; }
}

/* md tier (>=992px) */
@media (min-width: 992px) {
    .boldgrid-section .row > [class*="col-md-"] { float: left; }
    .boldgrid-section .col-md-12 { width: 100%; }
    .boldgrid-section .col-md-11 { width: 91.66666667%; }
    .boldgrid-section .col-md-10 { width: 83.33333333%; }
    .boldgrid-section .col-md-9  { width: 75%; }
    .boldgrid-section .col-md-8  { width: 66.66666667%; }
    .boldgrid-section .col-md-7  { width: 58.33333333%; }
    .boldgrid-section .col-md-6  { width: 50%; }
    .boldgrid-section .col-md-5  { width: 41.66666667%; }
    .boldgrid-section .col-md-4  { width: 33.33333333%; }
    .boldgrid-section .col-md-3  { width: 25%; }
    .boldgrid-section .col-md-2  { width: 16.66666667%; }
    .boldgrid-section .col-md-1  { width: 8.33333333%; }
}

/* od 2026-07-24: announcement top-bar promo — enlarge + center as one cluster (CSS-only,
   no Header Builder edit; done in the reconcile session while the concurrent chat stood
   down). The two promo menu items, the DigiKey badge and the language switcher all live in
   .whb-col-right; the center column is empty. This collapses the empty center column, lets
   the right column span full width, enlarges the two promo items to 16px/600, and centers
   the whole group (promo text + DigiKey + language kept adjacent) via justify-content:center.
   Bar color and height unchanged. Desktop-only (>=1025px) — the top bar has no max-width hide
   rule, so the mobile promo is deliberately left at its original size/position to avoid
   overflow in the cramped mobile bar. ASSUMES these items stay in .whb-col-right — do NOT
   also move them into the center column in Header Builder or this layout breaks. */
@media (min-width: 1025px) {
  .whb-top-bar .whb-top-bar-inner .whb-col-center { flex: 0 1 0% !important; }
  .whb-top-bar .whb-top-bar-inner .whb-col-right { flex: 1 1 auto !important; }
  .whb-top-bar .whb-col-right > .wd-header-nav,
  .whb-top-bar .whb-col-right ul.wd-nav { width: 100%; }
  .whb-top-bar .whb-col-right ul.wd-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; }
  .whb-top-bar #menu-item-356430 > a,
  .whb-top-bar #menu-item-326020 > a { font-size: 16px; font-weight: 600; }
}

/* od 2026-07-25: top-bar language switcher (GTranslate popup, li#menu-item-453329)
   was TOP-aligned, not centered. The switcher anchor renders display:inline inside
   a block .gtranslate_wrapper that stretches the full ~72px bar height, so the flag
   + "English" hugged the top while the promo links and the DigiKey badge (both
   flex/align-items:center) sat mid-bar — which read as the language button being
   "not fixed". Vertically center the switcher so it joins the cluster, and match the
   promo 16px so the group reads as one. Scoped to .whb-top-bar #menu-item-453329 so
   no other GTranslate instance is affected. Desktop-only (>=1025px), consistent with
   the banner block above; the cramped mobile bar is left as-is. */
@media (min-width: 1025px) {
  .whb-top-bar #menu-item-453329 { align-items: center; }
  .whb-top-bar #menu-item-453329 > .gtranslate_wrapper { display: flex; align-items: center; }
  .whb-top-bar #menu-item-453329 a.gt_switcher-popup { display: flex; align-items: center; line-height: 1; }
  .whb-top-bar #menu-item-453329 a.gt_switcher-popup span { font-size: 16px; }
}

/* Blog card equal-height alignment.
   The archive grid is CSS Grid (.wd-blog-holder.wd-grid-g), so each <article
   class="wd-post"> already stretches to the tallest card in its row. But the
   visible card is .wd-post-inner (radius + shadow) and the white panel is
   .wd-post-content — neither inherited that stretched height, so each panel ended
   wherever its own text ended and "Continue reading" sat at a different level in
   every column. Make the inner wrapper fill the stretched article, let the content
   column absorb the leftover space, and push the read-more link to the bottom so
   all columns share one baseline.
   No fixed heights are used. At the mobile breakpoint the grid is --wd-col-sm:1,
   so a row holds a single card, 100% resolves to that card's own content height
   and every rule below becomes inert — mobile keeps its natural stacked sizing.
   Excluded from .wd-masonry, where isotope positions items absolutely and equal
   heights would defeat the masonry effect. */
.wd-blog-holder.wd-grid-g:not(.wd-masonry) > .wd-post {
  display: flex;
}

.wd-blog-holder.wd-grid-g:not(.wd-masonry) > .wd-post > .wd-post-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wd-blog-holder.wd-grid-g:not(.wd-masonry) > .wd-post .wd-post-thumb {
  flex: 0 0 auto;
}

.wd-blog-holder.wd-grid-g:not(.wd-masonry) > .wd-post .wd-post-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.wd-blog-holder.wd-grid-g:not(.wd-masonry) > .wd-post .wd-post-read-more {
  margin-top: auto;
}

/* Blog card thumbnail ratio guard.
   Theme Settings now crops blog thumbnails to 800x533 (3:2) via Woodmart's
   on-the-fly resizer, which is what actually fixes image weight and makes the
   thumbnails uniform. But OTF can only downscale: a source image smaller than
   800px wide comes back at its own ratio (a 600x600 original yields 533x533),
   which would leave that one card's image shorter than its neighbours and break
   the row alignment again. Pin the ratio at the display layer so a short or
   odd-sized source is covered rather than shrinking the box.
   Safe on mobile: this is a ratio, not a height, so the box scales with the
   single-column card width instead of forcing a fixed size. */
.wd-blog-holder.wd-grid-g:not(.wd-masonry) > .wd-post .wd-post-img {
  aspect-ratio: 3 / 2;
}

.wd-blog-holder.wd-grid-g:not(.wd-masonry) > .wd-post .wd-post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Archive author-bio spacing.
   The theme's blog-el-author-bio part gives .wd-author-bio a margin-bottom of 40px but no
   margin-top, because in its own context (end of a single post) the content above already
   supplies the gap. Rendered at the end of an archive it sits flush against the last row of
   cards, so mirror the theme's own 40px on top and keep the block symmetric. */
.od-archive-author-bio {
  margin-top: 40px;
}