/*
Theme Name: Astra Child - OEM Tshirts
Theme URI: https://oemtshirts.com
Template: astra
Version: 1.7.4
Description: Astra child theme for OEM T-shirts Factory. Repositions variation swatches below the product image on mobile.
Author: OEM Tshirts
Text Domain: astra-child-oem
*/

/* ============================================
   MOBILE SWATCH CLONE STYLING
   
   A JS-cloned copy of the color swatches is
   inserted right after the product gallery.
   It is only visible on screens <= 921px.
   ============================================ */

/* Hide the clone on desktop by default (JS also controls this) */
.oem-mobile-swatches {
    display: none;
}

@media (max-width: 921px) {

    /* Hide the ORIGINAL swatch table on mobile so swatches don't
       appear twice. The clone below the gallery replaces it.
       (Only targets the table inside the form, not the clone.) */
    .single-product .summary form.variations_form table.variations {
        display: none !important;
    }

    /* Show the cloned swatch container on mobile */
    .oem-mobile-swatches {
        display: block;
        padding: 12px 20px 4px;
        /* Override WVS plugin swatch size via its own CSS variables */
        --wvs-single-product-item-width: 24px;
        --wvs-single-product-item-height: 24px;
    }

    /* Make the cloned swatch list look clean */
    .oem-mobile-swatches ul.variable-items-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* Belt-and-suspenders: force the swatch item size directly.
       !important beats the WVS plugin rule
       (.woo-variation-swatches .variable-items-wrapper .variable-item)
       so the size is guaranteed even if the plugin overrides the var. */
    .oem-mobile-swatches li.variable-item {
        margin: 0;
        width: 24px !important;
        height: 24px !important;
    }

    /* Inner color/image preview fills the item */
    .oem-mobile-swatches li.variable-item .variable-item-contents,
    .oem-mobile-swatches li.variable-item img {
        width: 100% !important;
        height: 100% !important;
    }

    /* Optional: a small label above the swatches */
    .oem-mobile-swatches .oem-swatch-label {
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        color: #333;
    }
}

/* ============================================
   MOBILE SHOP TOOLBAR: REMOVE "DEFAULT SORTING"

   On screens <= 544px Astra pins the shop toolbar
   (result count + "Default sorting" dropdown) to
   the bottom of the viewport (position:fixed;
   bottom:0; z-index:590), where it covers the
   page-bottom content (the row of blue icons).
   Hide the whole toolbar on mobile.
   ============================================ */
@media (max-width: 544px) {
    .ast-header-break-point .ast-shop-toolbar-container,
    .ast-shop-toolbar-container {
        display: none !important;
    }
}

/* ============================================
   MOBILE HEADER: ACCOUNT (LOGIN / REGISTER) ICON

   Injected into the mobile header's right section
   by oem_render_mobile_account_icon() in
   functions.php. Hidden on desktop (the mobile
   header itself collapses there anyway).
   ============================================ */
.oem-mobile-account-link {
    display: none;
}

@media (max-width: 921px) {
    .oem-mobile-account-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin-left: auto;
        color: #2E86C1;
        background: transparent;
        border: none;
        border-radius: 50%;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .oem-mobile-account-link:hover,
    .oem-mobile-account-link:focus {
        color: #ffffff;
        background: #2E86C1;
        text-decoration: none;
    }

    .oem-mobile-account-link svg {
        width: 24px;
        height: 24px;
        display: block;
    }
}

/* ============================================
   ADD-TO-CART AREA: BUY A SAMPLE + REQUEST QUOTE

   - Hide the quantity selector (wholesale buyers
     discuss quantity with us; samples default to 1)
   - "Request Quote" secondary button sits next to
     the primary "Buy a Sample" button
   ============================================ */

/* Hide the quantity selector on single product pages */
.single-product form.cart .quantity {
    display: none !important;
}

/* Lay the action buttons out side by side */
.single-product .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* "Request Quote" — outline pill matching the primary blue button */
.single-product .oem-request-quote-button {
    background: transparent !important;
    border: 2px solid #2E86C1 !important;
    color: #2E86C1 !important;
    border-radius: 30px;
    padding: 0.62em 1.6em;
    line-height: 1.4;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, color 0.2s ease;
}

.single-product .oem-request-quote-button:hover,
.single-product .oem-request-quote-button:focus {
    background: #2E86C1 !important;
    color: #ffffff !important;
}

/* "/pc" unit suffix appended to the unit price by move-swatches.js */
.single-product .oem-price-unit {
    font-size: 0.72em;
    font-weight: 600;
    color: #64748b;
    margin-left: 3px;
    letter-spacing: 0.3px;
}

/* On mobile the form (price + buy buttons) is reordered to the top of the
   summary (right under the cloned swatches). Give them comfortable spacing.
   Note: p.price now lives INSIDE the form, so use a descendant selector. */
@media (max-width: 921px) {
    .single-product .summary p.price {
        margin: 2px 0 10px;
    }

    .single-product .summary > form.variations_form {
        margin-bottom: 14px;
    }
}

/* ============================================================
   QUOTE REQUEST MODAL (oemq-*)
   Rendered by oem_render_quote_modal() in functions.php.
   System font stack to match the site. Brand blue #2E86C1.
   ============================================================ */

.oemq-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 21, 38, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.oemq-overlay.open {
    opacity: 1;
    visibility: visible;
}

.oemq-modal {
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: min(94vh, 900px);
    background: #f4f8fc;
    border-radius: 14px;
    box-shadow: 0 30px 80px -18px rgba(4, 16, 32, 0.55);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #2e3e52;
    transform: translateY(26px) scale(0.985);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.oemq-overlay.open .oemq-modal {
    transform: translateY(0) scale(1);
}

/* ---------- Header: brand left / title right ---------- */

.oemq-head {
    position: relative;
    flex: none;
    background: linear-gradient(120deg, #0b1f33 0%, #10304f 70%, #0d3a63 100%);
    color: #fff;
    padding: 18px 56px 18px 24px;
}

.oemq-headrow {
    display: flex;
    align-items: center;
    gap: 22px;
}

.oemq-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 50%;
    min-width: 0;
}

.oemq-logo {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 9px;
    background: #fff;
    padding: 4px;
    object-fit: contain;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.oemq-brandname {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.25;
    white-space: nowrap;
}

.oemq-brandsub {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 2px;
    white-space: nowrap;
}

.oemq-title {
    flex: 1 1 50%;
    min-width: 0;
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.oemq-title h2 {
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.15;
    color: #fff;
    background: none;
}

.oemq-sub {
    font-size: 12px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.66);
    margin-top: 3px;
}

.oemq-close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.oemq-close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-50%) rotate(90deg);
}

/* ---------- Body ---------- */

.oemq-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 24px 26px;
    overscroll-behavior: contain;
}

.oemq-sec {
    background: #fff;
    border: 1px solid #dde7f1;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

/* Side-by-side pair (artwork upload + delivery date) */
.oemq-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.oemq-duo .oemq-sec {
    margin-bottom: 0;
}

.oemq-seclabel {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: #0b1f33;
    margin-bottom: 14px;
}

.oemq-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: #2E86C1;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    transform: translateY(2px);
}

.oemq-hint {
    font-size: 12px;
    font-weight: 500;
    color: #7b8aa0;
    margin-left: auto;
}

/* ---------- Captured product ---------- */

.oemq-captured {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #0e8a5f;
    background: #e3f5ec;
    border: 1px solid #bfe6d3;
    border-radius: 999px;
    padding: 4px 11px;
    margin-bottom: 10px;
}

.oemq-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0e8a5f;
    animation: oemqPulse 1.6s ease-in-out infinite;
}

@keyframes oemqPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14, 138, 95, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(14, 138, 95, 0); }
}

.oemq-prodtitle {
    margin: 0 0 5px;
    padding: 0;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    color: #0b1f33;
    background: none;
}

.oemq-prodmeta {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
}

.oemq-prodmeta b {
    color: #2e3e52;
    font-weight: 600;
}

.oemq-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 18px;
    align-items: start;
}

.oemq-img {
    position: relative;
    background: linear-gradient(160deg, #eef4fa, #dfe9f4);
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oemq-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.25s ease;
}

.oemq-imgtag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(11, 31, 51, 0.82);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 4px 10px;
    border-radius: 999px;
    opacity: 0.75;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.oemq-imgtag.on {
    opacity: 1;
    background: #2E86C1;
}

.oemq-colorlabel {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 10px;
}

.oemq-colorlabel span {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #93a3b8;
}

.oemq-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.oemq-swatch {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    border: 2px solid #d9e2ec;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.oemq-swatch:hover {
    transform: translateY(-2px);
    border-color: #9db8d6;
}

.oemq-swatch.sel {
    border-color: #2E86C1;
    box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.25);
}

.oemq-colorname {
    margin-top: 12px;
    font-size: 13px;
    color: #64748b;
}

.oemq-colorname b {
    color: #0b1f33;
    font-weight: 700;
}

/* ---------- Size rows (horizontal cells) ---------- */

.oemq-sizerows {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.oemq-sizerow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    flex: 1 1 0;
    min-width: 96px;
    padding: 9px 8px;
    border: 1px solid #e3ebf4;
    border-radius: 9px;
    background: #fbfdff;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.oemq-specialrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #e3ebf4;
    border-radius: 9px;
    background: #fbfdff;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.oemq-sizerow.has-qty {
    background: #e7f1fc;
    border-color: #bcd7f2;
}

.oemq-sz {
    width: auto;
    flex: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #0b1f33;
    text-align: center;
}

/* Stepper stretches to fill each size cell */
.oemq-sizerow .oemq-stepper {
    width: 100%;
}

.oemq-sizerow .oemq-stepper button {
    flex: 0 0 30px;
    width: 30px;
    padding: 7px 0;
    font-size: 15px;
}

.oemq-sizerow .oemq-stepper input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: 14px;
    padding: 7px 2px;
}

.oemq-stepper {
    display: flex;
    align-items: stretch;
    flex: none;
    border: 1px solid #cdd9e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.oemq-stepper button {
    width: 36px;
    border: none;
    background: #f2f6fb;
    color: #2E86C1;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
    padding: 9px 0;
}

.oemq-stepper button:hover {
    background: #dbe9f8;
}

.oemq-stepper input {
    width: 58px;
    border: none;
    border-left: 1px solid #e3ebf4;
    border-right: 1px solid #e3ebf4;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #0b1f33;
    padding: 8px 2px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.oemq-stepper input::-webkit-outer-spin-button,
.oemq-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.oemq-specialrow {
    margin-top: 6px;
}

.oemq-special-label {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #cdd9e6;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    color: #2e3e52;
    background: #fff;
}

.oemq-special-label:focus {
    outline: none;
    border-color: #2E86C1;
    box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.15);
}

.oemq-removespecial {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid #e3ebf4;
    border-radius: 50%;
    background: #fff;
    color: #93a3b8;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.oemq-removespecial:hover {
    color: #c0392b;
    border-color: #f2c4bd;
    background: #fdf1ef;
}

.oemq-addspecial {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1.5px dashed #b7cde6;
    border-radius: 9px;
    background: transparent;
    color: #2E86C1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.oemq-addspecial:hover {
    background: #e7f1fc;
    border-color: #2E86C1;
}

.oemq-summary {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e3ebf4;
}

.oemq-big {
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
}

.oemq-big em {
    display: inline-block;
    font-style: normal;
    font-size: 30px;
    font-weight: 800;
    color: #0b1f33;
    line-height: 1;
    margin-right: 4px;
}

.oemq-big em.oemq-pop {
    animation: oemqPop 0.3s ease;
}

@keyframes oemqPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); color: #2E86C1; }
    100% { transform: scale(1); }
}

.oemq-sumsub {
    font-size: 12.5px;
    color: #7b8aa0;
    margin-top: 4px;
}

.oemq-est {
    color: #2E86C1;
    font-weight: 700;
}

/* ---------- Print placements ---------- */

.oemq-placegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 9px;
}

.oemq-placecard {
    position: relative;
    display: block;
    padding: 10px 8px 9px;
    border: 1.5px solid #dde7f1;
    border-radius: 10px;
    background: #fbfdff;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.oemq-placecard:hover {
    border-color: #9db8d6;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(11, 31, 51, 0.25);
}

.oemq-placecard.sel {
    border-color: #2E86C1;
    background: #e7f1fc;
}

.oemq-tee svg {
    width: 56px;
    height: auto;
    display: block;
    margin: 0 auto 6px;
}

.oemq-teebody {
    fill: #e2eaf3;
    stroke: #8fa6bf;
    stroke-width: 2;
    stroke-linejoin: round;
    transition: fill 0.15s ease;
}

.oemq-teecollar {
    fill: none;
    stroke: #8fa6bf;
    stroke-width: 2;
    stroke-linecap: round;
}

.oemq-zone {
    fill: rgba(46, 134, 193, 0.14);
    stroke: #2E86C1;
    stroke-width: 1.6;
    stroke-dasharray: 3.5 2.5;
}

.oemq-placecard.sel .oemq-teebody {
    fill: #cfe3f8;
}

.oemq-placename {
    font-size: 12px;
    font-weight: 700;
    color: #0b1f33;
    line-height: 1.25;
}

.oemq-placedim {
    font-size: 10.5px;
    color: #93a3b8;
    margin-top: 2px;
}

.oemq-placecheck {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2E86C1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.oemq-placecard.sel .oemq-placecheck {
    opacity: 1;
    transform: scale(1);
}

.oemq-placechips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    min-height: 20px;
}

.oemq-placeempty {
    font-size: 12.5px;
    color: #93a3b8;
    font-style: italic;
}

.oemq-placechip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0b1f33;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 7px 5px 11px;
    border-radius: 999px;
    animation: oemqChipIn 0.2s ease;
}

@keyframes oemqChipIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.oemq-placechip button {
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}

.oemq-placechip button:hover {
    background: #c0392b;
}

/* ---------- Contact + notes ---------- */

.oemq-fieldgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.oemq-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #2e3e52;
    margin-bottom: 5px;
}

.oemq-field label b {
    color: #c0392b;
}

.oemq-field input,
.oemq-notes {
    width: 100%;
    border: 1px solid #cdd9e6;
    border-radius: 8px;
    background: #fff;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #2e3e52;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.oemq-field input:focus,
.oemq-notes:focus {
    outline: none;
    border-color: #2E86C1;
    box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.15);
}

.oemq-field input.err {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.oemq-notes {
    min-height: 84px;
    resize: vertical;
}

.oemq-span2 {
    grid-column: span 2;
}

.oemq-ziptag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e7f1fc;
    border: 1px solid #bcd7f2;
    color: #2E86C1;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    vertical-align: 1px;
    white-space: nowrap;
}

.oemq-hintline {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #7b8aa0;
}

/* Custom English date picker */
.oemq-datewrap {
    position: relative;
}

.oemq-datewrap > input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8aa0' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.oemq-datepicker {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    display: none;
    width: 280px;
    padding: 12px;
    background: #fff;
    border: 1px solid #dde7f1;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(11, 31, 51, 0.16);
}

.oemq-datepicker.open {
    display: block;
}

.oemq-dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.oemq-dp-title {
    font-size: 14px;
    font-weight: 700;
    color: #0b1f33;
}

.oemq-dp-nav {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dde7f1;
    border-radius: 8px;
    background: #fff;
    color: #2e3e52;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.oemq-dp-nav:hover {
    background: #eef4fb;
}

.oemq-dp-weekdays,
.oemq-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.oemq-dp-weekdays span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #7b8aa0;
    padding: 4px 0;
}

.oemq-dp-day {
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #2e3e52;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.oemq-dp-day:hover:not(:disabled):not(.sel) {
    background: #eef4fb;
}

.oemq-dp-day.today {
    box-shadow: inset 0 0 0 1px #bcd7f2;
}

.oemq-dp-day.sel {
    background: #2E86C1;
    color: #fff;
    font-weight: 700;
}

.oemq-dp-day:disabled {
    color: #c3cdd9;
    cursor: default;
}

.oemq-err {
    display: none;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #fdf1ef;
    border: 1px solid #f2c4bd;
    color: #a3352a;
    font-size: 13px;
    font-weight: 600;
}

.oemq-err.show {
    display: block;
    animation: oemqChipIn 0.2s ease;
}

/* ---------- Logo upload ---------- */

.oemq-upload {
    border: 2px dashed #b7cde6;
    border-radius: 10px;
    background: #fbfdff;
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.oemq-upload:hover,
.oemq-upload.drag {
    border-color: #2E86C1;
    background: #e7f1fc;
}

.oemq-upicon {
    font-size: 26px;
    line-height: 1;
    color: #2E86C1;
    margin-bottom: 6px;
}

.oemq-uptitle {
    font-size: 14px;
    font-weight: 700;
    color: #0b1f33;
}

.oemq-uptitle u {
    color: #2E86C1;
}

.oemq-upsub {
    font-size: 12px;
    color: #93a3b8;
    margin-top: 4px;
}

.oemq-filelist {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
}

.oemq-fileitem {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    border: 1px solid #dde7f1;
    border-radius: 9px;
    background: #fff;
    animation: oemqChipIn 0.2s ease;
}

.oemq-filethumb {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 7px;
    background: #eef4fa;
    border: 1px solid #dde7f1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #2E86C1;
}

.oemq-filethumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oemq-fileinfo {
    flex: 1 1 auto;
    min-width: 0;
}

.oemq-fn {
    font-size: 13px;
    font-weight: 600;
    color: #0b1f33;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oemq-fs {
    font-size: 11.5px;
    color: #93a3b8;
    margin-top: 1px;
}

.oemq-fileremove {
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid #e3ebf4;
    border-radius: 50%;
    background: #fff;
    color: #93a3b8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.oemq-fileremove:hover {
    color: #c0392b;
    border-color: #f2c4bd;
    background: #fdf1ef;
}

/* ---------- Footer ---------- */

.oemq-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 24px;
    background: #fff;
    border-top: 1px solid #dde7f1;
}

.oemq-foottotal {
    font-size: 13.5px;
    color: #64748b;
}

.oemq-foottotal b {
    font-size: 19px;
    font-weight: 800;
    color: #0b1f33;
}

.oemq-submit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: none;
    border-radius: 999px;
    background: #2E86C1;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 12px 26px;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(46, 134, 193, 0.65);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.oemq-submit:hover {
    background: #0353a4;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -10px rgba(46, 134, 193, 0.7);
}

.oemq-submit .oemq-arr {
    transition: transform 0.2s ease;
}

.oemq-submit:hover .oemq-arr {
    transform: translateX(4px);
}

.oemq-submit.busy {
    opacity: 0.7;
    cursor: wait;
}

/* ---------- Success state ---------- */

.oemq-success {
    text-align: center;
    padding: 26px 8px 12px;
}

.oemq-check {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #0e8a5f;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    line-height: 62px;
    animation: oemqCheckIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes oemqCheckIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.oemq-success h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    color: #0b1f33;
}

.oemq-success p {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px;
}

.oemq-success p b {
    color: #0b1f33;
}

.oemq-sum {
    max-width: 460px;
    margin: 0 auto 22px;
    text-align: left;
    border: 1px solid #dde7f1;
    border-radius: 10px;
    overflow: hidden;
}

.oemq-sum > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 14px;
    font-size: 13px;
}

.oemq-sum > div:nth-child(odd) {
    background: #f4f8fc;
}

.oemq-sum span {
    color: #7b8aa0;
    flex: none;
}

.oemq-sum b {
    color: #0b1f33;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.oemq-again {
    border: 1.5px solid #2E86C1;
    border-radius: 999px;
    background: transparent;
    color: #2E86C1;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 24px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.oemq-again:hover {
    background: #2E86C1;
    color: #fff;
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
    .oemq-overlay {
        padding: 0;
    }

    .oemq-modal {
        width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    .oemq-head {
        padding: 14px 50px 14px 16px;
    }

    .oemq-headrow {
        gap: 12px;
    }

    .oemq-logo {
        width: 38px;
        height: 38px;
    }

    .oemq-brandname {
        font-size: 12.5px;
        letter-spacing: 0.8px;
        white-space: normal;
    }

    .oemq-brandsub {
        font-size: 10.5px;
    }

    .oemq-title {
        padding-left: 12px;
    }

    .oemq-title h2 {
        font-size: 18px;
    }

    .oemq-sub {
        font-size: 10.5px;
    }

    .oemq-body {
        padding: 14px 12px 20px;
    }

    .oemq-sec {
        padding: 14px 13px;
    }

    .oemq-split {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .oemq-img {
        max-width: 300px;
        margin: 0 auto;
    }

    .oemq-fieldgrid {
        grid-template-columns: 1fr;
    }

    .oemq-duo {
        grid-template-columns: 1fr;
    }

    .oemq-span2 {
        grid-column: auto;
    }

    .oemq-placegrid {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    }

    .oemq-foot {
        padding: 11px 14px;
    }

    .oemq-submit {
        padding: 11px 18px;
        font-size: 14px;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .oemq-overlay,
    .oemq-modal,
    .oemq-swatch,
    .oemq-placecard,
    .oemq-pulse,
    .oemq-check {
        transition: none;
        animation: none;
    }
}

/* ============================================
   HEADER TAGLINE - compact two-line layout
   Splits the tagline across two lines (break right after the &)
   and shrinks it so it reads as a subtitle, distinct from the
   site title. (Added 2026-07)
   ============================================ */
.ast-site-title-wrap .site-description {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.2px;
    max-width: 190px;   /* forces the line break right after the & */
    margin-top: 2px;
}

/* ============================================
   FOOTER SIMPLIFICATION (Standard)

   Streamlines the Elementor footer (template
   #1551) without editing its JSON:
   1. Hides the top quick-icon row (HOME /
      PRODUCTS / TECHNIQUE / CART) on all devices.
   2. Hides utility / legal / draft entries in the
      "Pages" sitemap so only real navigation links
      remain. Scoped to the footer location only.
   Product Categories, social icons, Get In Touch
   and the copyright line are intentionally kept.
   The mobile fixed bottom button bar (My Sticky
   Elements plugin) is separate and untouched.
   (Added 2026-07)
   ============================================ */

/* 1) Hide the top quick-icon link row in the footer */
.elementor-location-footer [data-id="0471219"] {
    display: none !important;
}

/* 2) Hide utility / legal / draft pages in the footer "Pages" sitemap */
.elementor-location-footer .page-item-30,
.elementor-location-footer .page-item-31,
.elementor-location-footer .page-item-32,
.elementor-location-footer .page-item-3,
.elementor-location-footer .page-item-10,
.elementor-location-footer .page-item-3040,
.elementor-location-footer .page-item-2879 {
    display: none !important;
}

/* ============================================
   REVIEW AVATAR (robot icon for privacy)
   Used by the homepage Customer Reviews section
   in place of real customer photos. (Added 2026-07)
   ============================================ */
.avatar-robot {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20rx%3D'32'%20fill%3D'%232E86C1'%2F%3E%3Cline%20x1%3D'32'%20y1%3D'13'%20x2%3D'32'%20y2%3D'19'%20stroke%3D'%23fff'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'11'%20r%3D'3'%20fill%3D'%23fff'%2F%3E%3Crect%20x%3D'17'%20y%3D'19'%20width%3D'30'%20height%3D'23'%20rx%3D'8'%20fill%3D'%23fff'%2F%3E%3Ccircle%20cx%3D'26'%20cy%3D'30'%20r%3D'3.2'%20fill%3D'%232E86C1'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'30'%20r%3D'3.2'%20fill%3D'%232E86C1'%2F%3E%3Crect%20x%3D'26'%20y%3D'36'%20width%3D'12'%20height%3D'2.6'%20rx%3D'1.3'%20fill%3D'%232E86C1'%2F%3E%3Crect%20x%3D'11.5'%20y%3D'26'%20width%3D'4'%20height%3D'9'%20rx%3D'2'%20fill%3D'%23fff'%2F%3E%3Crect%20x%3D'48.5'%20y%3D'26'%20width%3D'4'%20height%3D'9'%20rx%3D'2'%20fill%3D'%23fff'%2F%3E%3Cpath%20d%3D'M22%2046%20Q32%2054%2042%2046%20Z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E");
    background-size: cover;
    background-position: center;
}

/* Unify global form focus border with site palette (Astra outputs a stale hardcoded value). */
body input[type="text"]:focus,body input[type="number"]:focus,body input[type="email"]:focus,body input[type="url"]:focus,body input[type="password"]:focus,body input[type="search"]:focus,body input[type=reset]:focus,body input[type=tel]:focus,body input[type=date]:focus,body select:focus,body textarea:focus{border-color:#2E86C1}


/* ===== MOBILE PRODUCTS PAGE: sidebar left 1/4 + products right 3/4, SQUARE product images ===== */
@media (max-width: 900px) {
  .oemp .pmain-grid { grid-template-columns: 1fr 3fr !important; gap: 12px !important; }
  .oemp .pside { position: sticky !important; top: 70px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; align-self: start !important; }
  /* Force all side cards (CATEGORIES, TAGS, SEARCH, QUOTE) to fill sidebar width equally */
  .oemp .pside > * { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  .oemp .prod-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .oemp .prod-card { flex-direction: column !important; align-items: stretch !important; }
  /* SQUARE product image: aspect-ratio 1/1 with object-fit cover (no max-height needed) */
  .oemp .prod-img { width: 100% !important; min-width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; max-height: none !important; object-fit: cover !important; display: block !important; }
  .oemp .prod-body { flex: 1 !important; padding: 12px 14px !important; }
  .oemp .prod-body h3 { font-size: 0.88rem !important; min-height: auto !important; margin-bottom: 8px !important; }
  .oemp .prod-specs { margin-bottom: 8px !important; }
  .oemp .prod-foot { padding-top: 8px !important; }
  .oemp .side-card h2 { font-size: 0.7rem !important; padding: 9px 12px !important; }
  .oemp .side-menu li a { font-size: 0.8rem !important; padding: 7px 12px !important; }
  .oemp .side-search { padding: 10px 12px !important; }
  .oemp .side-quote { padding: 14px 12px !important; }
  .oemp .side-quote h3 { font-size: 0.88rem !important; }
  .oemp .side-quote p { font-size: 0.72rem !important; }
}
/* ===== NARROW MOBILE (<=560px): keep 1/4 sidebar + 3/4 products layout from 900px rule,
   but tighten gap, make sidebar non-sticky, and shrink sidebar text so 1/4 fits on small phones. ===== */
@media (max-width: 560px) {
  .oemp .pmain-grid { gap: 8px !important; }
  .oemp .pside { position: static !important; top: auto !important; }
  /* product image stays SQUARE via aspect-ratio from 900px rule - no max-height needed */
  .oemp .prod-body { padding: 10px 12px !important; }
  .oemp .prod-body h3 { font-size: 0.85rem !important; }
  .oemp .prod-specs span { font-size: 0.65rem !important; padding: 2px 6px !important; }
  .oemp .prod-foot { padding-top: 6px !important; }
  .oemp .prod-foot .price { font-size: 0.85rem !important; }
  .oemp .side-card h2 { font-size: 0.68rem !important; padding: 8px 10px !important; letter-spacing: 0.4px !important; }
  .oemp .side-menu li a { font-size: 0.76rem !important; padding: 6px 10px !important; line-height: 1.3 !important; }
  .oemp .side-search { padding: 10px !important; }
  .oemp .side-search input { font-size: 0.76rem !important; padding: 6px 10px !important; }
  .oemp .side-quote { padding: 12px 10px !important; }
  .oemp .side-quote h3 { font-size: 0.8rem !important; }
  .oemp .side-quote p { font-size: 0.68rem !important; line-height: 1.4 !important; }
  .oemp .side-quote .btn { font-size: 0.73rem !important; padding: 7px 12px !important; }
}

/* Restore product description images hidden by legacy patch 31b - 2026-08-30 mobile fix.
   Higher specificity (.woocommerce-tabs) beats the patch display:none !important. */
.single-product .woocommerce-tabs #tab-description img.aligncenter,
.single-product .woocommerce-tabs #tab-description img.size-full,
.single-product .woocommerce-tabs #tab-description img[data-srcset] {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}


/* ===== MOBILE BOTTOM NAVIGATION BAR ===== */
.oem-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  justify-content: space-around;
  align-items: center;
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
  height: 60px;
}
.oem-bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #555;
  font-size: 0.68rem;
  font-weight: 500;
  gap: 3px;
  flex: 1;
  transition: color 0.2s;
}
.oem-bnav-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}
.oem-bnav-item:hover,
.oem-bnav-item:focus {
  color: #2E86C1;
}
@media (max-width: 768px) {
  .oem-bottom-nav {
    display: flex;
  }
  body {
    padding-bottom: 60px;
  }
}
/* ===== END MOBILE BOTTOM NAV CSS ===== *//* ===== END MOBILE PRODUCTS CSS ===== */

/* Fix footer margin-top gap */
.oem-footer { margin-top: 0 !important; }
/* ============================================
   ACCESSIBILITY: Link underlines for WCAG 1.4.1
   Colorblind users can't distinguish links by color alone.
   Added 2026-08-14
   ============================================ */
.entry-content a,
.entry-summary a,
.comment-content a,
.widget a,
.site-footer a:not(.ast-footer-social-icon),
.blog-post-card a,
.oemp a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.entry-content a:hover,
.entry-summary a:hover,
.comment-content a:hover,
.widget a:hover,
.site-footer a:not(.ast-footer-social-icon):hover,
.blog-post-card a:hover,
.oemp a:hover {
    text-decoration-thickness: 2px;
}
/* Keep nav and button links underline-free */
.main-navigation a,
.ast-button-wrap a,
.oem-request-quote-button,
.oemq-submit,
.oem-bnav-item {
    text-decoration: none !important;
}
/* ============================================
   FIX 2026-08-31 — Homepage DDP checkmark icons
   The 4 inline SVG checkmarks in the homepage
   DDP list (Delivered Duty Paid section) carry
   no class and no width/height attributes, so
   they expand to the full container width
   (~370px on mobile / 1405px on desktop).
   Constrain them to a small inline icon and
   let the list item text flow after the icon.
   ============================================ */
.page-id-3573 .entry-content li > svg:not([class]):not([width]):not([height]) {
    width: 20px !important;
    height: 20px !important;
    display: inline-block;
    vertical-align: -3px;
    margin: 0 8px 0 0;
    fill: #2E86C1;
}

/* Drop the forced line break right behind each icon */
.page-id-3573 .entry-content li > svg:not([class]):not([width]):not([height]) + br {
    display: none;
}

/* ============================================
   FIX 2026-08-31 (2) — Homepage content edge padding
   Astra's page-builder template zeroes the padding
   of .site-content > .ast-container (inline CSS).
   The homepage is classic-editor flat HTML with no
   inner padding of its own, so text touches the
   screen edges on mobile and spans the full 1440px
   on desktop. Restore side padding and cap the
   content width on larger screens.
   ============================================ */
.page-id-3573 .entry-content {
    padding-left: 20px;
    padding-right: 20px;
}
@media (min-width: 769px) {
    .page-id-3573 .entry-content {
        max-width: 1430px; /* 0901: 1100 -> 1430, desktop width +30% */
        margin-left: auto;
        margin-right: auto;
    }
}

/* DDP list: drop default disc bullets — they
   duplicate the inline SVG checkmarks */
.page-id-3573 .entry-content ul {
    list-style: none;
    padding-left: 0;
}

/* Cap paragraph line length for readability
   (~65-75 characters per line on wide screens) */
.page-id-3573 .entry-content > p {
    max-width: 780px;
}


/* ============================================
   FIX 2026-09-12 (readj) — Footer social icons too large
   Elementor's social-icons widget renders each
   Font Awesome SVG without width/height
   attributes, so the SVG inherits the parent
   .elementor-social-icon button width — which
   on this site is set to 377px by the Elementor
   editor column. Pin the button and inner SVG
   to a compact size (26px button, 1em icon).
   ============================================ */
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon {
    /* The element renders as <a> with display:inline by default,
       so width/height on their own are ignored. Force inline-flex
       so the 26×26 box actually takes effect. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
    flex: 0 0 26px;
}

.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon svg,
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon i {
    width: 1em !important;
    height: 1em !important;
    display: block;
    flex: 0 0 1em;
    min-width: 1em;
}

/* Hide the screen-reader text inside social icons in the footer.
   It only matters for accessibility — the visible icon is the SVG.
   Without this the text would push the SVG out of view in the 26×26 box. */
.elementor-location-footer .elementor-widget-social-icons .elementor-social-icon .elementor-screen-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================
   FIX 2026-09-12 (readj) — Product variation swatch size
   The mobile clone (.oem-mobile-swatches) was
   already constrained to 30×30 in earlier fixes,
   but the ORIGINAL WVS plugin swatch list
   (rendered in the form, shown on desktop and
   as fallback on mobile) was not constrained
   and uses the plugin's default which renders
   noticeably larger. Force 22×22 on every
   viewport for visual consistency.
   ============================================ */
.woo-variation-swatches .variable-items-wrapper {
    --wvs-single-product-item-width: 22px;
    --wvs-single-product-item-height: 22px;
}

.woo-variation-swatches .variable-items-wrapper .variable-item {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
}

.woo-variation-swatches .variable-items-wrapper .variable-item img,
.woo-variation-swatches .variable-items-wrapper .variable-item .variable-item-contents {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* ============================================
   HERO TOP SPACE SHRINK - 70%
   1. /products/ page: section.phead padding-top 128px -> 38px (mobile 116px -> 35px)
   2. /technique/ (Apparel Decoration) page: section.hero padding-top 150px -> 45px (mobile 120px -> 36px)
   3. /technique/ hide breadcrumb "1. Home > 2. Apparel Decoration" text
   ============================================ */

/* /products/ - archive page header shrink */
body.archive.post-type-archive-product .oemp .phead {
    padding-top: 38px !important;
}
/* /technique/ - page hero shrink + hide breadcrumb */
body.page-id-27 .oemt .hero {
    padding-top: 45px !important;
}
/* Breadcrumb "1. Home > 2. Apparel Decoration" lives at the same level as the hero
   (inside .entry-content, not inside .hero), so target it via the page id. */
body.page-id-27 .entry-content > nav.breadcrumb,
body.page-id-27 nav.breadcrumb.oem-ilb-breadcrumb {
    display: none !important;
}

/* Mobile (narrow phones) - apply at <=640px since phead/hero values change on mobile */
@media (max-width: 640px) {
    body.archive.post-type-archive-product .oemp .phead {
        padding-top: 35px !important;
    }
    body.page-id-27 .oemt .hero {
        padding-top: 36px !important;
    }
}


/* ============================================
   DESKTOP COLOR SWATCHES LAYOUT FIX (2026-09-14)

   Problem: WVS plugin's flex rules target
   `.woo-variation-swatches .variable-items-wrapper`
   but the table wrapper doesn't have that class.
   Without flex, the <ul> defaults to display:block
   and <li> items stack vertically into a 580px tall
   single column with 22x26px swatches.

   Fix: force the layout directly on the actual
   selectors used by the WooCommerce default
   table.variations markup.
   ============================================ */

/* 1) Make the <ul> wrapper a horizontal flex container */
.single-product .summary table.variations
ul.variable-items-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 2) Force each swatch to 48x48 with clean styling */
.single-product .summary table.variations
ul.variable-items-wrapper li.variable-item {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 2px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

/* 3) Hover state */
.single-product .summary table.variations
ul.variable-items-wrapper li.variable-item:hover {
    border-color: #2E86C1;
    transform: scale(1.06);
}

/* 4) Selected state — primary brand color outline */
.single-product .summary table.variations
ul.variable-items-wrapper li.variable-item.selected {
    border-color: #2E86C1;
    box-shadow: 0 0 0 1px #2E86C1;
    outline: none;
}

/* 5) Image fills the swatch */
.single-product .summary table.variations
ul.variable-items-wrapper li.variable-item
.variable-item-contents,
.single-product .summary table.variations
ul.variable-items-wrapper li.variable-item
img.variable-item-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
    object-fit: cover;
    border-radius: 2px;
}

/* ============================================
   SELECTED COLOR NAME DISPLAY

   The WVS plugin shows the color name only as a
   hover tooltip. Add a persistent label below the
   swatch list that updates when a color is selected.
   The <div id="oem-color-name"> is injected by
   the OEM-SWATCH-COLOR-NAME JS snippet.
   ============================================ */

#oem-color-name {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0b1f33;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    min-height: 22px;
    line-height: 1.4;
    transition: opacity 0.2s ease, background 0.2s ease;
}

#oem-color-name.oem-empty {
    color: #94a3b8;
    background: #f8fafc;
    font-style: italic;
    font-weight: 500;
}

/* Small color swatch dot prefix */
#oem-color-name .oem-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    margin-right: 6px;
    vertical-align: middle;
}