/*
Theme Name: Astra Child - OEM Tshirts
Theme URI: https://oemtshirts.com
Template: astra
Version: 1.7.0
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: 30px;
        --wvs-single-product-item-height: 30px;
    }

    /* 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: 30px !important;
        height: 30px !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/3 + products right 2/3 ===== */
@media (max-width: 900px) {
  .oemp .pmain-grid { grid-template-columns: 1fr 2fr !important; gap: 16px !important; }
  .oemp .pside { position: sticky !important; top: 70px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .oemp .prod-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .oemp .prod-card { flex-direction: column !important; align-items: stretch !important; }
  .oemp .prod-img { width: 100% !important; min-width: 100% !important; aspect-ratio: auto !important; height: auto !important; max-height: 200px !important; object-fit: cover !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.72rem !important; padding: 10px 14px !important; }
  .oemp .side-menu li a { font-size: 0.82rem !important; padding: 7px 14px !important; }
  .oemp .side-search { padding: 12px 14px !important; }
  .oemp .side-quote { padding: 16px 14px !important; }
  .oemp .side-quote h3 { font-size: 0.9rem !important; }
  .oemp .side-quote p { font-size: 0.75rem !important; }
}
/* ===== MOBILE PRODUCTS PAGE (<=560px): single column stack, products first, sidebar below - 2026-08-30 mobile fix ===== */
@media (max-width: 560px) {
  .oemp .pmain-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .oemp .pcontent { order: -1 !important; }
  .oemp .pside { position: static !important; top: auto !important; }
  .oemp .prod-img { max-height: none !important; }
  .oemp .prod-body h3 { font-size: 0.95rem !important; }
  .oemp .prod-specs span { font-size: 0.7rem !important; padding: 3px 8px !important; }
  .oemp .side-card h2 { font-size: 0.8rem !important; padding: 10px 14px !important; }
  .oemp .side-menu li a { font-size: 0.85rem !important; padding: 8px 14px !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;
}