/*
 * Explore More — header trigger and shell primitives. Loaded in <head> on the live page (≈1.7 KB gzipped);
 * view styles (xm-views.css) are loaded by xm-core.js on first use.
 */

/* ------------------------------------------------------------------ the header trigger */
.xm-trigger {
    order: 3; flex: 0 0 auto; margin-left: 12px;
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 16px 0 12px;
    border: 1.5px solid #006b7a; border-radius: 30px; background: #f4f9fa;
    color: #004a54; font-family: "Poppins", "Nunito", sans-serif; font-weight: 600; font-size: 14px; line-height: 1;
    cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.xm-trigger:hover { border-color: #006b7a; background: #f4f9fa; }
.xm-trigger:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #006b7a; }
/* No dead button: the trigger only shows when the page's head snippet confirmed JavaScript and <dialog> support. */
html:not(.xm-js) .xm-trigger { display: none; }
.xm-trigger[aria-expanded="true"] { background: #006b7a; border-color: #006b7a; color: #fff; }
.xm-trigger__i { width: 20px; height: 20px; flex: 0 0 auto; }
.xm-trigger__i rect, .xm-trigger__i path { transition: opacity .15s, transform .2s; transform-origin: 12px 12px; }
.xm-trigger__i .x { opacity: 0; }
.xm-trigger[aria-expanded="true"] .xm-trigger__i rect { opacity: 0; transform: scale(.4); }
.xm-trigger[aria-expanded="true"] .xm-trigger__i .x { opacity: 1; }
.xm-trigger__l { display: inline-flex; gap: .28em; }
.xm-trigger__chev { width: 16px; height: 16px; flex: 0 0 auto; margin-left: 1px; }

/* phones and tablets: the trigger stays on the first header row, next to the phone number */
@media (max-width: 1023.98px) { .header-top-row .xm-trigger { order: 2; } }
/* 1200–1399: a slightly tighter trigger (the nav fits on one row, as before) */
@media (min-width: 1200px) and (max-width: 1399.98px) { .xm-trigger { padding: 0 12px 0 10px; gap: 6px; margin-left: 8px; font-size: 13.5px; } }
/* Below 1200: compact trigger — icon beside a two-line label, 34 px tall, so the header keeps its original height.
   An invisible extension gives it a 44 px tall touch target. */
@media (max-width: 1199.98px) {
    .xm-trigger { position: relative; flex-direction: row; gap: 5px; height: 34px; padding: 0 9px 0 7px; margin-left: 6px; border-radius: 8px; font-size: 12px; font-weight: 700; }
    .xm-trigger::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
    .xm-trigger__i { width: 18px; height: 18px; }
    .xm-trigger__l { flex-direction: column; gap: 0; line-height: 1.05; text-align: left; }
}
/* 1024–1199: the nav was already short of room here (one item hidden before Explore More); a slightly smaller
   logo and tighter nav spacing give back the room the trigger takes. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .header-top-row.header-mobile .logo-section { max-width: 128px; }
    .header-top-row.header-mobile .header-menu ul li a { padding-left: 9px; padding-right: 9px; }
}
/* 1024–1139: the live CSS enlarges nav text here (17 px), so spacing is tightened a little more */
@media (min-width: 1024px) and (max-width: 1139.98px) {
    .header-top-row.header-mobile .header-menu ul li a { padding-left: 4px; padding-right: 4px; }
    .header-top-row.header-mobile .mob-phone h6 span { font-size: 16px; }
    .header-top-row.header-mobile .xm-trigger { margin-left: 4px; }
}
/* Very narrow phones: icon above the two-line label — the footprint of the old MENU control. */
@media (max-width: 359.98px) {
    .xm-trigger { flex-direction: column; justify-content: center; gap: 1px; height: auto; min-height: 44px; min-width: 50px; padding: 2px 6px; border-radius: 10px; }
    .xm-trigger::after { content: none; }
    .xm-trigger__l { text-align: center; }
}
/* phones up to 479 px (iPhone SE/mini/Pro, 360–430 px Android): keep logo, phone and trigger on one row.
   The doubled class outranks responsive.css whatever the load order; no :has() needed. */
@media (max-width: 479.98px) {
    .header-top-row.header-mobile { column-gap: 8px; flex-wrap: nowrap; }
    .header-top-row.header-mobile .logo-section img { width: 104px; }
    .header-top-row.header-mobile .mob-phone { column-gap: 6px; }
    .header-top-row.header-mobile .mob-phone div img { width: 24px; height: 24px; }
    .header-top-row.header-mobile .mob-phone h6 { font-size: 12px; }
    .header-top-row.header-mobile .mob-phone h6 span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .xm-trigger, .xm-trigger__i rect, .xm-trigger__i path { transition: none; } }

/* ------------------------------------------------------------------ shell primitives */
html.xm-lock { overflow: hidden; }
html.xm-lock body { padding-right: var(--xm-sb, 0px); }
html.xm-lock header { padding-right: var(--xm-sb, 0px); }    /* the fixed header must not shift either */
dialog.xm-dlg { padding: 0; border: 0; margin: 0; max-width: none; max-height: none; background: transparent; color: #122b30; overflow: visible; }
dialog.xm-dlg::backdrop { background: rgba(2, 24, 28, .55); }
dialog.xm-dlg *, dialog.xm-dlg *::before, dialog.xm-dlg *::after { box-sizing: border-box; }
.xm-ib { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; color: #122b30; cursor: pointer; }
.xm-ib:hover { background: #eef5f6; }
.xm-ib:focus-visible, .xm-shell-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #006b7a; }
.xm-ib .xm-i { width: 22px; height: 22px; }
.xm-shell-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 8px; border: 1.5px solid #c4dde1; background: #fff; color: #004a54; font: 600 14px/1.2 "Poppins", "Nunito", sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; }
.xm-shell-btn:hover { border-color: #006b7a; background: #f4f9fa; color: #004a54; }
.xm-shell-btn--cta { background: #ff8a3d; border-color: #ff8a3d; color: #1d1206; }
.xm-shell-btn--cta:hover { background: #f57a2a; border-color: #f57a2a; color: #1d1206; }
.xm-shell-btn .xm-i { width: 18px; height: 18px; }
.xm-shell-btn--icon { padding: 8px 11px; }

/* toast */
.xm-toast { position: fixed; left: 50%; bottom: 20px; z-index: 2147483000; transform: translate(-50%, 20px); opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; border-radius: 10px; background: #122b30; color: #fff; font: 600 14px/1.4 "Nunito", sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: opacity .2s, transform .2s, visibility .2s; }
.xm-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.xm-toast button { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; background: transparent; color: #fff; font-weight: 700; cursor: pointer; }
@media (max-width: 575px) { .xm-toast { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .xm-toast { transition: none; } }

/* Landing page quick enquiry form (quick-enquiry-form.php: footer + "Enquire Now" popup).
   The product list, the single mobile field and the message box follow the existing .details_form look (css/style.css). */
.qef .input-group > .form-select, .qef .input-group > textarea.form-control { border: 0; border-radius: 0; box-shadow: none; background-color: transparent; color: var(--ink, #122b30); font-size: 14px; }
.qef .input-group > .form-select { height: 44px; padding: 0 34px 0 4px; background-position: right 12px center; cursor: pointer; }
.qef .input-group > .form-select:has(option[value=""]:checked) { color: #9aa9ac; }
.qef .input-group > .form-select option { color: #122b30; }
.qef .input-group > textarea.form-control { min-height: 64px; padding: 11px 4px; resize: vertical; line-height: 1.4; }
.qef .input-group:has(textarea) { align-items: flex-start; }
.qef .input-group-text svg { width: 20px; height: 20px; color: #546a6e; opacity: .85; }
.qef .form-select:focus, .qef textarea.form-control:focus { box-shadow: none; outline: none; }
@media (pointer: coarse) { .qef input, .qef select, .qef textarea { font-size: 16px !important; } }   /* no zoom on focus (iOS) */