/* ==========================================================================
   Sky Titan Glass — fluid (screen-adaptive) content width
   File: assets/css/sky-fluid.css
   Loaded last in <head> on every page.

   Replaces the fixed 1170px / 1320px content box with a box that follows
   the screen width, so wide monitors no longer show large empty side
   margins. Layout only: no markup, no behaviour, no functionality changed.

   "html:root" has a higher specificity than ":root", so these variables win
   over the older 1320px definitions in sky-header.css and the home template
   regardless of where those <style> blocks appear in the page.
   ========================================================================== */

html:root {
    --sky-content-max: 100%;
    --sky-content-pad: clamp(14px, 2.5vw, 48px);
    --stg-container: 100%;
    --stg-gutter: clamp(14px, 2.5vw, 48px);
    --stg-shell: 100%;   /* homepage page-shell cap (was 1300px in sky-align.css) */
}

/* Generic theme container: full screen width with responsive side padding.
   Specific narrower containers (blog, newsletter, etc.) use more specific
   selectors and keep their intended reading width. */
.container,
.container-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: var(--sky-content-pad);
    padding-right: var(--sky-content-pad);
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Inner page banner (My Account, Cart, Checkout, regular pages, ...).
   The photo used to scale with the screen width (about 25% of the width in
   height), so on a large monitor it filled most of the first screen. It is
   now a slim band whose height adapts to the screen.
   -------------------------------------------------------------------------- */
.inner-banner {
    position: relative;
    height: clamp(96px, 11vw, 190px);
    overflow: hidden;
}
.inner-banner > img,
.inner-banner .lazy-image img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    object-fit: cover;
    object-position: center 40%;
    float: none;
}
.inner-banner .lazy-image {
    padding-top: 0;
    position: absolute;
    inset: 0;
}
.inner-banner .caption {
    position: absolute !important;
    inset: 0;
    width: auto !important;
    float: none !important;
    display: flex;
    align-items: center;
    z-index: 15;
}
.inner-banner .max-width {
    padding: 0 !important;
}
.inner-banner .heading {
    font-size: clamp(22px, 3vw, 44px) !important;
    margin: 0;
}

/* --------------------------------------------------------------------------
   My Account: navigation column + content use the full fluid width.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
    min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content table {
    width: 100%;
}
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        float: none;
        width: 100%;
        min-width: 0;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Never allow sideways page scroll on phones (iOS Safari). */
/* "clip" (unlike "hidden") does not break sticky headers. */
body {
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Header always stays at the very top of the window (desktop).
   style.css makes it position:fixed without a "top", so the browser placed
   it at its in-flow position, which could leave it floating mid-screen.
   The WordPress admin bar height is respected when the bar is shown.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body header:not(.account-login) {
        top: var(--wp-admin--admin-bar--height, 0px) !important;
        bottom: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Homepage images grow with their column instead of keeping their natural
   pixel size (which left large empty gaps on wide screens).
   -------------------------------------------------------------------------- */
.quality-wraps .img-box img,
.why-wraps .column img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
.contact-wraps .img-box img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 640px;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   About block ("Built to move the industry forward"): balanced two-column
   layout — image column capped, text vertically centred and a bit larger,
   buttons aligned with the text instead of floating in the middle.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .quality-wraps > .container {
        display: flex !important;
        align-items: center !important;
        gap: clamp(32px, 4vw, 80px) !important;
    }
    .quality-wraps .img-box {
        flex: 0 0 46% !important;
        max-width: 46% !important;
    }
    .quality-wraps .img-box img {
        max-width: 780px !important;
        margin-left: auto;
    }
    .quality-wraps .text-box {
        flex: 1 1 auto !important;
        max-width: 760px !important;
        width: auto !important;
    }
    .quality-wraps .text-box h2 {
        font-size: clamp(34px, 2.6vw, 52px) !important;
    }
    .quality-wraps .text-box p {
        font-size: clamp(15px, 1vw, 18px) !important;
        line-height: 1.65 !important;
    }
    .quality-wraps .text-box > div:last-child,
    .quality-wraps .text-box div[style*="justify-content"] {
        justify-content: flex-start !important;
    }
}

/* --------------------------------------------------------------------------
   Guest homepage feature strip (Extensive Inventory / Reliable Delivery /
   Dedicated Support / Product Innovation): spans the full content width on
   wide screens, four equal columns. Tablet/phone rules in tpl-home.php
   still apply below 1025px.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    html body .intro-wraps .intro-icons.sky-intro-list {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        max-width: 100% !important;
    }
}

/* About block: text column vertically centred within its section. */
@media (min-width: 992px) {
    .quality-wraps .text-box {
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Why Choose Us: the four cards sit vertically centred in their section. */
@media (min-width: 992px) {
    .why-wraps > .container > .column:last-child {
        align-self: center !important;
    }
}

/* Homepage video band: show the whole video (no cropping) at its own
   aspect ratio, scaling with the screen width. */
html body .video-wraps video {
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   Year / Make / Model dropdowns (Selectric) always open DOWNWARD, on every
   page. Selectric flips the list above the field when it thinks the window
   is too short, which pushed it up under the fixed header.
   -------------------------------------------------------------------------- */
html body .selectric-wrapper.selectric-above .selectric-items {
    top: 100% !important;
    bottom: auto !important;
    border-radius: 0 0 10px 10px !important;
}
html body .selectric-wrapper.selectric-open {
    z-index: 1000 !important;
}

/* Vehicle Selection bar (fitment plugin, every page that shows it): follows
   the same fluid content width as the rest of the site. */
html body .cpf-filter-wrap.filter-wrap {
    width: calc(100% - (var(--sky-content-pad) * 2)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* NAGS fitment results / product tables (YMM results, shop, search results,
   tag product tables): content follows the fluid width instead of 1180px. */
html body .cpf-nags-app .cpf-results-shell {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(0px, 1.5vw, 24px) !important;
    padding-right: clamp(0px, 1.5vw, 24px) !important;
    box-sizing: border-box !important;
}

/* Shop / search pages: the bar already sits inside a padded box, so it
   spans that box exactly and lines up with the results table below. */
html body .plp-wrapper .cpf-filter-wrap.filter-wrap {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   Log-in / register page bar ("Don't you have an account? Sign up").
   Phones: a normal bar at the top of the page (no floating over the hero,
   no empty band above it). Desktop: pinned to the top of the window.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    html body header.account-login {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin: 0 !important;
        z-index: 5;
    }
    html body header.account-login + * {
        margin-top: 0 !important;
    }
    html body header.account-login p {
        font-size: 17px;
        line-height: 1.4;
    }
}
@media (min-width: 768px) {
    html body header.account-login {
        top: var(--wp-admin--admin-bar--height, 0px) !important;
    }
}

/* Footer: room under the last row of location cards, and the copyright
   bar sits directly under the cards area (no white band). */
html body footer > .container {
    padding-bottom: clamp(32px, 3vw, 48px) !important;
}
html body footer .copyright-block {
    margin-top: 0 !important;
}

/* reCAPTCHA badge sat on top of Dollar (bottom-right) and hid her and the
   "Call Dollar" button. Badge moves to the bottom-left corner, collapsed to
   its logo and opening on hover (it stays visible, as Google requires). */
html body .grecaptcha-badge {
    right: auto !important;
    left: 4px !important;
    width: 70px !important;
    overflow: hidden !important;
    transition: width .3s ease !important;
    z-index: 900 !important;
}
html body .grecaptcha-badge:hover {
    width: 256px !important;
}

/* --------------------------------------------------------------------------
   Sky Elite pages (VIP Access, General Access, The World of Sky Elite):
   content follows the fluid site width instead of a fixed 1170px column.
   -------------------------------------------------------------------------- */
html body .sky-elite-page,
html body .sky-elite-access-message,
html body .skyw-container {
    width: calc(100% - (var(--sky-content-pad) * 2)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}
html body .sky-elite-page *,
html body .skyw-container * {
    min-width: 0;
}
html body .sky-elite-page input,
html body .sky-elite-page select,
html body .sky-elite-page textarea {
    font-size: 16px !important;              /* iPhone: no zoom on focus */
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
}
html body .sky-elite-page img,
html body .skyw-container img { max-width: 100%; height: auto; }
/* Tabs on the access pages wrap on narrow screens instead of overflowing. */
@media (max-width: 767px) {
    html body .sky-elite-page { margin-top: 24px !important; padding-left: 0 !important; padding-right: 0 !important; }
    html body .sky-elite-page [role="tablist"],
    html body .sky-elite-page .tabs,
    html body .sky-elite-page ul[class*="tab"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px;
    }
    html body .sky-elite-page form,
    html body .sky-elite-page form > div {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    html body .sky-elite-page form button,
    html body .sky-elite-page form input[type="submit"] {
        width: 100% !important;
    }
    html body .skyw-container [role="tablist"],
    html body .skyw-container .skyw-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
}

/* Delivery run modal: one even type scale close to the rest of the site.
   Titles 20px, body 15px, labels 13px; Gold+ only items are emphasized. */
html body .sky-run-dialog-head .sky-dialog-kicker { font-size: 13px !important; letter-spacing: .14em !important; }
html body .sky-run-dialog-head h3 { font-size: 28px !important; line-height: 1.2 !important; }
html body .sky-run-dialog-head p { font-size: 16px !important; }
html body .sky-run-modal .sky-weekly-service-head span,
html body .sky-run-modal .sky-access-guidance-head > span,
html body .sky-run-modal .sky-service-day span,
html body .sky-run-modal .sky-service-day small { font-size: 13px !important; letter-spacing: .1em !important; }
html body .sky-run-modal .sky-weekly-service-head strong { font-size: 15px !important; }
html body .sky-run-modal .sky-service-day strong,
html body .sky-run-modal .sky-cutoff-guidance strong,
html body .sky-run-modal .sky-access-guidance-head strong,
html body .sky-run-modal .sky-area-card-title h4 { font-size: 20px !important; line-height: 1.3 !important; }
html body .sky-run-modal .sky-service-day p,
html body .sky-run-modal .sky-service-day span:last-child,
html body .sky-run-modal .sky-cutoff-guidance p,
html body .sky-run-modal .sky-cutoff-guidance span:not(.sky-guidance-icon),
html body .sky-run-modal .sky-access-item p,
html body .sky-run-modal .sky-new-member-note,
html body .sky-run-modal .sky-area-card-note { font-size: 15px !important; line-height: 1.55 !important; }
html body .sky-run-modal .sky-access-item a { font-size: 16px !important; }
html body .sky-run-modal .sky-access-badge { font-size: 13px !important; }
html body .sky-run-modal .sky-cutoff-guidance {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 18px 22px !important;
}
html body .sky-run-modal .sky-guidance-icon { flex: none; width: 64px !important; height: 64px !important; font-size: 22px !important; }
html body .sky-run-modal .sky-area-toggle-copy strong { font-size: 16px !important; }
html body .sky-run-modal .sky-area-run-row > strong { font-size: 17px !important; }
html body .sky-run-modal .sky-area-run-row > span { font-size: 15px !important; }
html body .sky-run-modal .sky-area-toggle .sky-area-run-count,
html body .sky-run-modal .sky-area-card-title > span,
html body .sky-run-modal .sky-area-run-row > small {
    font-size: 13px !important;
    line-height: 1.25 !important;
    padding: 5px 12px !important;
}
/* Gold+ only: emphasized. */
html body .sky-run-modal .sky-area-run-row > small.is-gold-access {
    background: #f5d98a !important;
    color: #5a4208 !important;
    box-shadow: inset 0 0 0 1px #d4a72c;
}
html body .sky-run-modal .sky-area-card-actions a:last-child,
html body .sky-run-modal .sky-vip-link {
    font-weight: 800 !important;
    box-shadow: 0 6px 18px rgba(196, 140, 30, .35) !important;
}
@media (max-width: 767px) {
    html body .sky-run-dialog-head h3 { font-size: 22px !important; }
    html body .sky-run-modal .sky-service-day strong,
    html body .sky-run-modal .sky-cutoff-guidance strong,
    html body .sky-run-modal .sky-access-guidance-head strong,
    html body .sky-run-modal .sky-area-card-title h4 { font-size: 17px !important; }
    html body .sky-run-modal .sky-cutoff-guidance {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 14px !important;
    }
    html body .sky-run-modal .sky-guidance-icon { width: 48px !important; height: 48px !important; font-size: 18px !important; }
}

/* Product page "added to your cart" notice: a small floating card under the header instead of a full-width bar. */
html body.single-product .woocommerce-notices-wrapper .woocommerce-message {
    position: fixed !important;
    top: calc(var(--site-header-h, 90px) + 14px) !important;
    right: 20px !important;
    left: auto !important;
    z-index: 99990 !important;
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 44px 16px 18px !important;
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    grid-template-areas: "icon text" "icon btns" !important;
    gap: 4px 12px !important;
    align-items: start !important;
    background: #fff !important;
    border: 1px solid #dbe5f1 !important;
    border-left: 4px solid #1fa463 !important;
    border-top: 1px solid #dbe5f1 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(16, 33, 61, .16) !important;
    color: #10213d !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    animation: skyToastIn .25s ease-out;
}
html body.single-product .woocommerce-notices-wrapper .woocommerce-message::before {
    content: "" !important;
    position: static !important;
    grid-area: icon;
    width: 26px; height: 26px; margin: 0 !important;
    border-radius: 50%;
    background: #1fa463 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 15px no-repeat !important;
    color: transparent !important;
}
html body.single-product .woocommerce-notices-wrapper .woocommerce-message .sky-toast-text { grid-area: text; }
html body.single-product .woocommerce-notices-wrapper .woocommerce-message .sky-toast-text strong { display: block; font-size: 16px; margin-bottom: 2px; }
html body.single-product .woocommerce-notices-wrapper .woocommerce-message .sky-toast-btns { grid-area: btns; display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
html body.single-product .woocommerce-notices-wrapper .woocommerce-message a.button {
    float: none !important; order: 0 !important; margin: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 38px !important; padding: 0 16px !important; border-radius: 8px !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
    background: #1557d6 !important; color: #fff !important; border: 1.5px solid #1557d6 !important;
}
html body.single-product .woocommerce-notices-wrapper .woocommerce-message .sky-toast-keep {
    min-height: 38px; padding: 0 14px; border-radius: 8px; border: 1.5px solid #cfd9e6;
    background: #fff; color: #10213d; font-size: 14px; font-weight: 600; cursor: pointer;
}
html body.single-product .woocommerce-notices-wrapper .woocommerce-message .sky-toast-x {
    position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: transparent; color: #6b7a90; font-size: 20px; line-height: 1; cursor: pointer;
}
html body.single-product .woocommerce-notices-wrapper .woocommerce-message .sky-toast-x:hover { background: #f1f5fb; }
html body.single-product .woocommerce-notices-wrapper .woocommerce-message.is-hiding { opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; }
@keyframes skyToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
    html body.single-product .woocommerce-notices-wrapper .woocommerce-message {
        right: 16px !important; left: 16px !important; width: auto !important;
    }
}