/* OD W1B prod-only layer (CSS). Rules carried from production's child theme 1.0.18 (od-style-1-0-18.css) that staging's
 * od-style-1-0-62.css does not have. Each region is one piece; the deploy tool keeps or strips regions by --keep/--drop. */
/* ---- 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;
    }
}
/* 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%; }
}