/*
 * Storefront utility classes
 * --------------------------
 * Companion to tokens.css. Loaded after Bootstrap on every page.
 *
 * Purpose: replace inline `style="..."` attributes with utility classes
 * (audit Step 7). Naming follows two conventions:
 *
 *   1. BS4-aligned extensions (`.font-weight-medium`, `.font-weight-semibold`)
 *      — slot into Bootstrap's existing `.font-weight-*` family.
 *   2. `.lb-*` prefixed utilities for properties Bootstrap 4 doesn't ship
 *      (font-size scale, line-height scale, brand colours, etc.).
 *
 * The font-size / line-height scales pick the values templates already use,
 * not the design-doc target scale (STOREFRONT-DESIGN.md §4.2). This is
 * deliberate: Step 7 moves declarations into CSS without changing visuals.
 * A follow-up pass (post-Step 4d-retry) will collapse the in-use scale into
 * the design-doc scale via visual review.
 */

/* ------------------------------------------------------------------ *
 *  Font weight
 * ------------------------------------------------------------------ */
.font-weight-medium   { font-weight: 500; }
.font-weight-semibold { font-weight: 600; }
.font-weight-extrabold { font-weight: 800; }

/* ------------------------------------------------------------------ *
 *  Font size — px scale (in-use values)
 *
 *  Naming convention: `.lb-fs-N` resolves to `N px` (or `N/10 px` when
 *  N is a fractional tail like `095`, `086`, `1125`). This is the
 *  convention the class names ALWAYS implied — `.lb-fs-16` = 16px,
 *  `.lb-fs-26` = 26px, `.lb-fs-2` = 20px, etc.
 *
 *  Historically these utilities held REM values calibrated against the
 *  "10px base" trick (`html { font-size: 62.5% }`), which made
 *  `lb-fs-16: 1.6rem` resolve to the intended 16px. The 62.5% rule was
 *  lost somewhere along the way — without it, every `.lb-fs-N` rendered
 *  1.6× too large because rem reverted to the browser default 16px base.
 *
 *  Fix is here, not in `html`: writing literal px in this single file
 *  restores design intent for every consumer (~hundreds of templates)
 *  without touching BS4's own rem-based internals (`mb-3`, `.btn`,
 *  `.form-control`, etc.) which depend on the standard 16px rem base.
 * ------------------------------------------------------------------ */
.lb-fs-05  { font-size: 5px; }
.lb-fs-07  { font-size: 7px; }
.lb-fs-08  { font-size: 8px; }
.lb-fs-086 { font-size: 8.6px; }
.lb-fs-09  { font-size: 9px; }
.lb-fs-092 { font-size: 9.2px; }
.lb-fs-095 { font-size: 9.5px; }
.lb-fs-096 { font-size: 9.6px; }
.lb-fs-1   { font-size: 10px; }
.lb-fs-106 { font-size: 10.6px; }
.lb-fs-11  { font-size: 11px; }
.lb-fs-1125 { font-size: 11.25px; }
.lb-fs-116 { font-size: 11.6px; }
.lb-fs-12  { font-size: 12px; }
.lb-fs-127 { font-size: 12.7px; }
.lb-fs-13  { font-size: 13px; }
.lb-fs-14  { font-size: 14px; }
.lb-fs-146 { font-size: 14.6px; }
.lb-fs-15  { font-size: 15px; }
.lb-fs-16  { font-size: 16px; }
.lb-fs-17  { font-size: 17px; }
.lb-fs-18  { font-size: 18px; }
.lb-fs-19  { font-size: 19px; }
.lb-fs-2   { font-size: 20px; }
.lb-fs-21  { font-size: 21px; }
.lb-fs-22  { font-size: 22px; }
.lb-fs-23  { font-size: 23px; }
.lb-fs-24  { font-size: 24px; }
.lb-fs-26  { font-size: 26px; }
.lb-fs-3   { font-size: 30px; }
.lb-fs-35  { font-size: 35px; }
.lb-fs-36  { font-size: 36px; }
.lb-fs-4   { font-size: 40px; }
.lb-fs-6   { font-size: 60px; }
.lb-fs-8   { font-size: 80px; }
.lb-fs-10  { font-size: 100px; }

/* Font size — px scale (in-use values) */
.lb-fs-px-9  { font-size: 9px; }
.lb-fs-px-10 { font-size: 10px; }
.lb-fs-px-11 { font-size: 11px; }
.lb-fs-px-115 { font-size: 11.5px; }
.lb-fs-px-12 { font-size: 12px; }
.lb-fs-px-13 { font-size: 13px; }
.lb-fs-px-14 { font-size: 14px; }
.lb-fs-px-16 { font-size: 16px; }
.lb-fs-px-18 { font-size: 18px; }
.lb-fs-px-19 { font-size: 19px; }
.lb-fs-px-20 { font-size: 20px; }
.lb-fs-px-21 { font-size: 21px; }
.lb-fs-px-24 { font-size: 24px; }
.lb-fs-px-26 { font-size: 26px; }
.lb-fs-px-28 { font-size: 28px; }
.lb-fs-px-30 { font-size: 30px; }
.lb-fs-px-34 { font-size: 34px; }

/* Font size — percent / em / keyword */
.lb-fs-pct-100 { font-size: 100%; }
.lb-fs-pct-120 { font-size: 120%; }
.lb-fs-pct-140 { font-size: 140%; }
.lb-fs-em-11  { font-size: 1.1em; }
.lb-fs-small   { font-size: small; }

/* ------------------------------------------------------------------ *
 *  Line height — px scale (in-use values)
 *
 *  Same story as the font-size scale above: `.lb-lh-N` was named to
 *  resolve to `N px` at 10px rem base. Switched to literal px so the
 *  values match the class names regardless of html font-size. See the
 *  comment block over `.lb-fs-*` for the full rationale.
 * ------------------------------------------------------------------ */
.lb-lh-12 { line-height: 12px; }
.lb-lh-13 { line-height: 13px; }
.lb-lh-14 { line-height: 14px; }
.lb-lh-16 { line-height: 16px; }
.lb-lh-18 { line-height: 18px; }
.lb-lh-19 { line-height: 19px; }
.lb-lh-2  { line-height: 20px; }
.lb-lh-22 { line-height: 22px; }
.lb-lh-23 { line-height: 23px; }
.lb-lh-24 { line-height: 24px; }
.lb-lh-26 { line-height: 26px; }
.lb-lh-27 { line-height: 27px; }
.lb-lh-28 { line-height: 28px; }
.lb-lh-3  { line-height: 30px; }
.lb-lh-34 { line-height: 34px; }
.lb-lh-36 { line-height: 36px; }
.lb-lh-39 { line-height: 39px; }
.lb-lh-4  { line-height: 40px; }
.lb-lh-46 { line-height: 46px; }
.lb-lh-7  { line-height: 70px; }

/* Line height — px scale */
.lb-lh-px-11 { line-height: 11px; }
.lb-lh-px-18 { line-height: 18px; }
.lb-lh-px-20 { line-height: 20px; }
.lb-lh-px-22 { line-height: 22px; }
.lb-lh-px-24 { line-height: 24px; }
.lb-lh-px-30 { line-height: 30px; }
.lb-lh-px-40 { line-height: 40px; }
.lb-lh-px-48 { line-height: 48px; }

/* Line height — em / keyword */
.lb-lh-em-13   { line-height: 1.3em; }
.lb-lh-initial { line-height: initial; }

/* ------------------------------------------------------------------ *
 *  Colour — brand tokens
 * ------------------------------------------------------------------ */
.lb-text-brand     { color: var(--lb-brand) !important; }
.lb-text-brand-alt { color: var(--lb-brand-alt) !important; }
.lb-text-accent    { color: var(--lb-accent) !important; }
.lb-text-promo     { color: var(--lb-price-promo) !important; }
.lb-text-success   { color: var(--lb-success) !important; }
.lb-text-warning   { color: var(--lb-warning) !important; }
.lb-bg-brand       { background-color: var(--lb-brand); }
.lb-bg-brand-alt   { background-color: var(--lb-brand-alt); }
.lb-bg-accent      { background-color: var(--lb-accent); }
.lb-bg-promo       { background-color: var(--lb-price-promo); }

/* Colour — common neutrals (verbatim from existing templates) */
.lb-text-000  { color: #000 !important; }
.lb-text-333  { color: #333 !important; }
.lb-text-555  { color: #555 !important; }
.lb-text-888  { color: #888 !important; }
.lb-text-999  { color: #999 !important; }
.lb-text-2a   { color: #2a2a2a !important; }
.lb-text-131  { color: #131313 !important; }
.lb-text-212529 { color: #212529 !important; }
.lb-text-d7d7d7 { color: #d7d7d7 !important; }
.lb-text-gray { color: gray !important; }
.lb-text-red  { color: red !important; }
.lb-text-green-bright { color: #06C54A !important; }
.lb-text-warning-deep { color: #856404 !important; }
.lb-bg-fff    { background-color: #fff !important; }
.lb-bg-f2     { background-color: #f2f2f2 !important; }
.lb-bg-f5     { background-color: #f5f5f5 !important; }
.lb-bg-f6     { background-color: #f6f6f6 !important; }
.lb-bg-f9     { background-color: #f9f9f9 !important; }
.lb-bg-fa     { background-color: #fafafa !important; }
.lb-bg-ea     { background-color: #eaeaea !important; }

/* Dark mode — the neutral grey bg utilities re-target to tokens so the
 * homepage section strips and payment bar stop being bright islands in
 * an otherwise-dark page. The light values are unchanged.
 *   .lb-bg-f5/f6 → --lb-section (slate-800)
 *   .lb-bg-fff  → --lb-card    (slate-700) — raised cards on top of strips
 *   .lb-bg-fa/f9 → --lb-surface-alt (slate-700) — softer panels */
html[data-theme="dark"] .lb-bg-fff { background-color: var(--lb-card) !important; }
html[data-theme="dark"] .lb-bg-f5  { background-color: var(--lb-section) !important; }
html[data-theme="dark"] .lb-bg-f6  { background-color: var(--lb-section) !important; }
html[data-theme="dark"] .lb-bg-f9  { background-color: var(--lb-surface-alt) !important; }
html[data-theme="dark"] .lb-bg-fa  { background-color: var(--lb-surface-alt) !important; }
.lb-bg-ebebeb { background-color: #ebebeb !important; }
.lb-bg-header { background-color: var(--lb-header-bg) !important; }

/* ------------------------------------------------------------------ *
 *  Sizing — BS4 width / height percentage utilities (NOT included in
 *  bootstrap-grid build).
 * ------------------------------------------------------------------ */
.w-25  { width: 25% !important; }
.w-50  { width: 50% !important; }
.w-75  { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto{ width: auto !important; }

.h-25  { height: 25% !important; }
.h-50  { height: 50% !important; }
.h-75  { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto{ height: auto !important; }

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

/* ------------------------------------------------------------------ *
 *  Font weight — BS4 utility classes (not in bootstrap-grid build)
 * ------------------------------------------------------------------ */
.font-weight-light   { font-weight: 300 !important; }
.font-weight-normal  { font-weight: 400 !important; }
.font-weight-bold    { font-weight: 700 !important; }
.font-italic         { font-style: italic !important; }

/* ------------------------------------------------------------------ *
 *  Position / display — not provided by the BS4-grid-only build we
 *  load on the computer side (BS4 full has these; we don't load full
 *  to avoid clashing with BS3's still-loaded reset).
 * ------------------------------------------------------------------ */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed    { position: fixed; }
.position-sticky   { position: sticky; }
.position-static   { position: static; }

.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-center   { align-items: center !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-stretch  { align-items: stretch !important; }
.align-items-baseline { align-items: baseline !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }

.flex-row        { flex-direction: row !important; }
.flex-row-reverse{ flex-direction: row-reverse !important; }
.flex-column     { flex-direction: column !important; }
.flex-wrap       { flex-wrap: wrap !important; }
.flex-nowrap     { flex-wrap: nowrap !important; }

.invisible { visibility: hidden !important; }
.visible   { visibility: visible !important; }

.float-left  { float: left !important; }
.float-right { float: right !important; }
.float-none  { float: none !important; }

.text-uppercase  { text-transform: uppercase !important; }
.text-lowercase  { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ------------------------------------------------------------------ *
 *  Badges — BS4 base styling. We DON'T reset background/colour here:
 *  the colour-modifier classes (`.badge-primary`, `.badge-orange`,
 *  `.badge-lojabrother`, etc. — including the variants in
 *  bootstrap-custom.css) carry the colour. Higher-specificity
 *  selectors (`span.badge`) would kill those modifiers, so keep this
 *  rule at single-class specificity. Loaded after bootstrap-custom.css
 *  so it overrides BS3's `.badge` pill defaults via source order.
 * ------------------------------------------------------------------ */
.badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}
.badge-primary   { color: #fff; background-color: #007bff; }
.badge-secondary { color: #fff; background-color: #6c757d; }
.badge-success   { color: #fff; background-color: #28a745; }
.badge-danger    { color: #fff; background-color: #dc3545; }
.badge-warning   { color: #212529; background-color: #ffc107; }
.badge-info      { color: #fff; background-color: #17a2b8; }
.badge-light     { color: #212529; background-color: #f8f9fa; }
.badge-dark      { color: #fff; background-color: #343a40; }
.badge-pill      { padding-right: .6em; padding-left: .6em; border-radius: 10rem; }

/* ------------------------------------------------------------------ *
 *  Vertical alignment — outside table context (BS4 .align-* only
 *  works in tables / inline-block)
 * ------------------------------------------------------------------ */
.lb-va-sub    { vertical-align: sub; }
.lb-va-super  { vertical-align: super; }
.lb-va-top    { vertical-align: top; }
.lb-va-middle { vertical-align: middle; }
.lb-va-bottom { vertical-align: bottom; }

/* ------------------------------------------------------------------ *
 *  Card / accordion / collapse — BS4 components (NOT included in
 *  bootstrap-grid build). Used by the product specs accordion
 *  (Step 4a BS3 panel-* → BS4 accordion) and other content cards.
 * ------------------------------------------------------------------ */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}
.card > hr {
    margin-right: 0;
    margin-left: 0;
}
.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}
.card-title    { margin-bottom: .75rem; }
.card-subtitle { margin-top: -.375rem; margin-bottom: 0; }
.card-text:last-child { margin-bottom: 0; }
.card-link + .card-link { margin-left: 1.25rem; }
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.card-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0, 0, 0, .03);
    border-top: 1px solid rgba(0, 0, 0, .125);
}
.card-footer:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}
.card-img,
.card-img-top,
.card-img-bottom { width: 100%; }
.card-img,
.card-img-top    { border-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px); }
.card-img,
.card-img-bottom { border-bottom-right-radius: calc(.25rem - 1px); border-bottom-left-radius: calc(.25rem - 1px); }

.accordion > .card {
    overflow: hidden;
}
.accordion > .card:not(:last-of-type) {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.accordion > .card:not(:first-of-type) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.accordion > .card > .card-header {
    border-radius: 0;
    margin-bottom: -1px;
}

.collapse:not(.show) { display: none; }
.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}

/* ------------------------------------------------------------------ *
 *  Border radius — BS4 utilities (NOT included in bootstrap-grid build)
 * ------------------------------------------------------------------ */
.rounded         { border-radius: .25rem !important; }
.rounded-top     { border-top-left-radius: .25rem !important; border-top-right-radius: .25rem !important; }
.rounded-right   { border-top-right-radius: .25rem !important; border-bottom-right-radius: .25rem !important; }
.rounded-bottom  { border-bottom-right-radius: .25rem !important; border-bottom-left-radius: .25rem !important; }
.rounded-left    { border-top-left-radius: .25rem !important; border-bottom-left-radius: .25rem !important; }
.rounded-circle  { border-radius: 50% !important; }
.rounded-pill    { border-radius: 50rem !important; }
.rounded-0       { border-radius: 0 !important; }
.rounded-sm      { border-radius: .2rem !important; }
.rounded-lg      { border-radius: .3rem !important; }

/* ------------------------------------------------------------------ *
 *  Layout — clear / cursor / decoration
 * ------------------------------------------------------------------ */
.lb-clear-both { clear: both; }
.lb-cursor-pointer { cursor: pointer; }
.lb-cursor-not-allowed { cursor: not-allowed; }
.lb-text-underline { text-decoration: underline; }
.lb-text-line-through { text-decoration: line-through; }
.lb-text-no-decoration { text-decoration: none; }
.lb-ws-nowrap { white-space: nowrap; }
.lb-ws-pre-wrap { white-space: pre-wrap; }
.lb-text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ *
 *  Margin / padding — non-BS4 values
 * ------------------------------------------------------------------ */
.lb-mt-15 { margin-top: 15px; }
.lb-mt-20 { margin-top: 20px; }
.lb-mb-10 { margin-bottom: 10px; }
.lb-mb-20 { margin-bottom: 20px; }
.lb-mb-30 { margin-bottom: 30px; }
.lb-mb-40 { margin-bottom: 40px; }
.lb-mb-60 { margin-bottom: 60px; }
.lb-mr-6  { margin-right: 6px; }
.lb-pt-30 { padding-top: 30px; }

/* ------------------------------------------------------------------ *
 *  Sizing
 * ------------------------------------------------------------------ */
.lb-w-1-pct  { width: 1%; }
.lb-w-11-pct { width: 11%; }
.lb-w-12-5   { width: 12.5%; }
.lb-w-table-7 { width: 14.28571428571429%; }  /* 1/7th — 7-col table */
.lb-w-25-pct { width: 25%; }
.lb-w-40-pct { width: 40%; }
.lb-w-48-pct { width: 48%; }
.lb-w-50-pct { width: 50%; }
.lb-w-60-pct { width: 60%; }
.lb-w-80-pct { width: 80%; }
.lb-w-90-pct { width: 90%; }
.lb-w-auto   { width: auto; }
.lb-w-1320   { width: 1320px; max-width: 1320px; }
.lb-h-50     { height: 50px; }
.lb-h-120    { height: 120px; }
.lb-mw-1200  { max-width: 1200px; }
.lb-mw-1320  { max-width: 1320px; }
.lb-mw-100   { max-width: 100%; }

/* ------------------------------------------------------------------ *
 *  Border radius — non-BS4 values
 * ------------------------------------------------------------------ */
.lb-rounded-4 { border-radius: 4px; }
.lb-rounded-20 { border-radius: 20px; }
.lb-rounded-right-5 { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
.lb-rounded-left-5  { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
.lb-rounded-top-4 { border-top-left-radius: 4px; border-top-right-radius: 4px; }

/*
 * Defeat BS4 4.6's
 *   .input-group:not(.has-validation) > .form-control:not(:last-child)
 * that zeroes the right radius (specificity 0,0,4,0). Triggered in the
 * checkout phone input (.callingCodeContainer) when the JS appends a
 * sibling .field-error-message / .field-success-message after the
 * input, demoting it from :last-child and re-flattening its right
 * edge. We match the BS4 selector specificity (0,0,4,0) and rely on
 * source order — utilities.css loads AFTER the BS4 CDN.
 */
.input-group:not(.has-validation) > .form-control.lb-rounded-right-5,
.input-group:not(.has-validation) > .form-select.lb-rounded-right-5 {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.input-group:not(.has-validation) > .form-control.lb-rounded-left-5,
.input-group:not(.has-validation) > .form-select.lb-rounded-left-5 {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

/* ------------------------------------------------------------------ *
 *  Borders — common in-use values
 * ------------------------------------------------------------------ */
.lb-border-top-2a    { border-top: 1px solid #2a2a2a; }
.lb-border-d5d9d9    { border: 1px solid #d5d9d9; }
.lb-border-d8d8d8    { border: 1px solid #d8d8d8; }
.lb-border-d7d7d7    { border-color: #d7d7d7; }
.lb-border-ced       { border: 1px solid #ced4da; } /* BS4 form-control default — visible input-group outline */
.lb-border-f6        { border: 1px solid #f6f6f6; }
.lb-border-bottom-f6 { border-bottom: 10px solid #f6f6f6; }
.lb-border-top-f6    { border-top: 10px solid #f6f6f6; }
.lb-border-bottom-faint { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.lb-border-0         { border: 0; }

/* ------------------------------------------------------------------ *
 *  Extra height + margin utilities
 * ------------------------------------------------------------------ */
.lb-h-340   { height: 340px; }
.lb-mb-06rem { margin-bottom: 0.6rem; }
.lb-mb-15   { margin-bottom: 15px; }

/* ------------------------------------------------------------------ *
 *  Z-index / zoom / visibility
 * ------------------------------------------------------------------ */
.lb-z-90  { z-index: 90; }
.lb-z-100 { z-index: 100; }
.lb-z-150 { z-index: 150; }
.lb-zoom-17 { zoom: 1.7; }

/* ------------------------------------------------------------------ *
 *  Overflow
 * ------------------------------------------------------------------ */
.lb-overflow-hidden    { overflow: hidden; }
.lb-overflow-auto      { overflow: auto; }
.lb-overflow-x-auto    { overflow-x: auto; }
.lb-overflow-x-hidden  { overflow-x: hidden; }
.lb-overflow-y-auto    { overflow-y: auto; }
.lb-overflow-y-hidden  { overflow-y: hidden; }
.lb-text-overflow-ellipsis { text-overflow: ellipsis; }

/* ------------------------------------------------------------------ *
 *  Positioning offsets (top/right/bottom/left)
 * ------------------------------------------------------------------ */
.lb-top-0     { top: 0; }
.lb-top-5     { top: 5px; }
.lb-top-35-pct { top: 35%; }
.lb-top-50-pct { top: 50%; }
.lb-left-0    { left: 0; }
.lb-left-50-pct { left: 50%; }
.lb-right-0   { right: 0; }
.lb-bottom-0  { bottom: 0; }

/* ------------------------------------------------------------------ *
 *  Float
 * ------------------------------------------------------------------ */
/* BS4 already has .float-left / .float-right / .float-none */

/* ------------------------------------------------------------------ *
 *  Extra spacing utilities (matches in-use px values)
 * ------------------------------------------------------------------ */
.lb-mt-5    { margin-top: 5px; }
.lb-mt-10   { margin-top: 10px; }
.lb-mt-30   { margin-top: 30px; }
.lb-mt-40   { margin-top: 40px; }
.lb-mt-3rem { margin-top: 3rem; }
.lb-mt-5rem { margin-top: 5rem; }
.lb-pl-4    { padding-left: 4px; }
.lb-pl-6    { padding-left: 6px; }
.lb-pl-12   { padding-left: 12px; }
.lb-pr-4    { padding-right: 4px; }
.lb-pr-12   { padding-right: 12px; }
.lb-pt-10   { padding-top: 10px; }
.lb-pb-20   { padding-bottom: 20px; }
.lb-px-4    { padding-left: 4px; padding-right: 4px; }
.lb-px-12   { padding-left: 12px; padding-right: 12px; }
.lb-py-0    { padding-top: 0; padding-bottom: 0; }
.lb-py-4-px-8 { padding: 4px 8px; }
.lb-py-6-px-8 { padding: 6px 8px; }
.lb-py-20-px-0 { padding: 20px 0; }
.lb-py-30-px-0 { padding: 30px 0; }
.lb-py-20-px-30 { padding: 20px 30px; }
.lb-p-20    { padding: 20px; }
.lb-p-25    { padding: 25px; }
.lb-my-5px  { margin: 5px 0; }
.lb-mb-10-only { margin: 0 0 10px 0; }
.lb-m-auto-x   { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ *
 *  Extra sizing — px widths that show up repeatedly
 * ------------------------------------------------------------------ */
.lb-w-105    { width: 105px; }
.lb-w-130    { width: 130px; }
.lb-w-320    { width: 320px; }
.lb-w-20-pct { width: 20%; }
.lb-h-200    { height: 200px; }
.lb-h-400    { height: 400px; }
.lb-h-30     { height: 30px; }
.lb-h-1px    { height: 1px; }
.lb-h-4284   { height: 42.84px; }
.lb-mh-360   { max-height: 360px; }
.lb-mh-500   { max-height: 500px; }

/* ------------------------------------------------------------------ *
 *  Text transform
 * ------------------------------------------------------------------ */
/* BS4 already provides .text-uppercase / .text-lowercase / .text-capitalize */

/* ------------------------------------------------------------------ *
 *  Wave 2 — additional utility classes (matches in-use long-tail patterns)
 * ------------------------------------------------------------------ */

/* Box-shadow */
.lb-shadow-none { box-shadow: none; }

/* Transforms — translate */
.lb-translate-x-n50 { transform: translateX(-50%); }
.lb-translate-y-n50 { transform: translateY(-50%); }
.lb-translate-x-50  { transform: translateX(50%); }
.lb-translate-y-50  { transform: translateY(50%); }
.lb-translate-50-50 { transform: translate(-50%, -50%); }
.lb-translate-50-35 { transform: translate(-50%, -35%); }

/* Extra widths */
.lb-w-46     { width: 46px; }
.lb-w-48     { width: 48px; }
.lb-w-50     { width: 50px; }
.lb-w-70     { width: 70px; }
.lb-w-100-px { width: 100px; }
.lb-w-120    { width: 120px; }
.lb-w-132    { width: 132px; }
.lb-w-400    { width: 400px; }
.lb-mw-150   { max-width: 150px; }

/* Extra heights */
.lb-h-28     { height: 28px; }
.lb-h-40     { height: 40px; }
.lb-h-80     { height: 80px; }
.lb-h-300    { height: 300px; }
.lb-h-450    { height: 450px; }
.lb-h-inherit { height: inherit; }

/* Extra padding combos */
.lb-py-5rem        { padding: 5rem 0; }
.lb-py-10-px-20    { padding: 10px 20px; }
.lb-py-30-px-20    { padding: 30px 20px; }
.lb-py-8-px-25     { padding: 8px 25px; }
.lb-py-05rem-px-1rem { padding: 0.5rem 1rem; }
.lb-pl-8-pr-6      { padding: 0 6px 0 8px; }
.lb-pt-20          { padding-top: 20px; }
.lb-pt-40          { padding-top: 40px; }
.lb-pt-50          { padding-top: 50px; }
.lb-pl-2           { padding-left: 2px; }
.lb-pl-5           { padding-left: 5px; }
.lb-pl-8           { padding-left: 8px; }
.lb-pr-7           { padding-right: 7px; }
.lb-pr-15          { padding-right: 15px; }

/* Extra margin */
.lb-mr-10          { margin-right: 10px; }
.lb-mt-12          { margin-top: 12px; }
.lb-mt-offscreen   { margin-top: -100000px; }
.lb-mb-15-only     { margin: 0 0 15px 0; }
.lb-my-120px       { margin: 120px 0; }

/* Extra positioning */
.lb-top-n4    { top: -4px; }
.lb-top-37    { top: 37px; }
.lb-top-216   { top: 216px; }
.lb-top-24494 { top: 244.94px; }
.lb-left-8    { left: 8px; }
.lb-bottom-n60 { bottom: -60px; }

/* Border radius extras */
.lb-rounded-0     { border-radius: 0; }
.lb-rounded-6     { border-radius: 6px; }
.lb-rounded-top-4 { border-radius: 4px 4px 0 0; }

/* Misc */
.lb-gap-10  { gap: 10px; }

/* Extra colours (low-frequency hex values) */
.lb-text-0d6efd { color: #0d6efd; }
.lb-text-b0bca8 { color: #b0bca8; }
.lb-text-535353 { color: #535353; }
.lb-text-aee2f3 { color: #aee2f3; }
.lb-text-0f1528 { color: #0f1528; }
.lb-text-3b5998 { color: #3b5998; }
.lb-text-0084ff { color: #0084ff; }
.lb-text-ff4500 { color: #ff4500; }
.lb-text-0077b5 { color: #0077b5; }
.lb-text-f21200 { color: #f21200; }
.lb-text-00e0f2 { color: #00e0f2; }
.lb-text-00b67a { color: #00b67a; }
.lb-text-424248 { color: #424248; }
.lb-text-e6a800 { color: #e6a800; }
.lb-text-c13584 { color: #c13584; }

/* Extra backgrounds */
.lb-bg-ffffbf  { background-color: #ffffbf; }
.lb-bg-fff3cd  { background-color: #fff3cd; }
.lb-bg-f1fafd  { background-color: #f1fafd; }

/* ------------------------------------------------------------------ *
 *  Accessibility — visually-hidden-focusable
 * ------------------------------------------------------------------ *
 *  Used for skip-to-content links (WCAG 2.4.1). Element is invisible
 *  until it receives keyboard focus, at which point it becomes a
 *  prominent CTA-style link at the top-left of the viewport.
 *  Mirrors Bootstrap 5 .visually-hidden-focusable behaviour for BS4.
 */
.visually-hidden-focusable {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
    position: fixed !important;
    top: 8px;
    left: 8px;
    z-index: 10000;
    width: auto;
    height: auto;
    padding: .75rem 1.25rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--lb-brand);
    color: #fff;
    text-decoration: none;
    border-radius: var(--lb-radius-sm);
    box-shadow: var(--lb-shadow);
}