/* ------------------------------------------------------------------
   Landing page (wireless4ls) — self contained.
   Reproduces the look of the old WordPress/Porto theme 1.2.2 home page.
   Sizes below were measured against https://wireless4ls.com.
   Depends only on: owl.carousel.min.css + font-awesome.min.css
   ------------------------------------------------------------------ */

:root {
    --lp-primary: #FDAF3D;
    --lp-primary-hover: #f2af4c;
    --lp-dark: #212529;
    --lp-darker: #1c2023;
    --lp-grey-bg: #ededed;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* The root background paints the rubber-band overscroll area on macOS/iOS.
       Keep it dark so overscrolling past the hero (top) or the copyright band
       (bottom) never flashes white. The body keeps its own white background. */
    background-color: var(--lp-darker);
}

body.lp-body {
    margin: 0;
    padding: 0;
    /* Old theme uses Poppins; fall back to the system UI stack. */
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #777;
    background-color: #fff;
    overflow-x: hidden;
}

.lp-body img {
    max-width: 100%;
    vertical-align: middle;
}

.lp-body a {
    color: inherit;
    text-decoration: none;
}

.lp-container {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Porto-ish typography helpers used on the page */
.font-weight-extra-bold {
    font-weight: 800;
}

.font-weight-bold {
    font-weight: 700;
}

.font-weight-semibold {
    font-weight: 600;
}

.font-weight-normal {
    font-weight: 400;
}

.text-3 {
    font-size: 1.1em;
}

.text-4 {
    font-size: 1.2em;
}

.text-5 {
    font-size: 1.35em;
}

.line-height-9 {
    line-height: 1.9;
}

.text-center {
    text-align: center;
}

.text-color-light {
    color: #fff;
}

.opacity-7 {
    opacity: .7;
}

/* Buttons -------------------------------------------------------- */
.lp-btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    line-height: 1.5;
    font-family: inherit;
    transition: all .2s ease;
    text-decoration: none;
}

.lp-btn-primary {
    background-color: var(--lp-primary);
    border-color: var(--lp-primary);
    color: #fff;
}

.lp-btn-primary:hover,
.lp-btn-primary:focus {
    background-color: var(--lp-primary-hover);
    border-color: var(--lp-primary-hover);
    color: #fff;
}

/* "VIEW ALL" / "SUBMIT" */
.lp-btn-lg {
    font-size: 14px;
    font-weight: 600;
    padding: 12px 48px;
}

/* ------------------------------------------------------------------
   Header — fixed and TRANSPARENT over the hero (old theme's
   `header-transparent`); turns solid #212529 and shrinks to 70px once
   the page is scrolled past 30px.
   ------------------------------------------------------------------ */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: 116px;
    background: transparent;
    transition: ease height 300ms;
}

#header.header-shrink {
    height: 70px;
}

#header .header-body {
    height: 100%;
    /* html:not(.sticky-header-active) #header.header-transparent .header-body */
    background-color: transparent;
    transition: background-color 300ms ease;
}

#header.header-shrink .header-body {
    background-color: var(--lp-dark);
}

#header .header-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

#header .header-logo {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* The old header keeps the logo at 120x84 in both states; when the bar
   shrinks to 70px the logo simply overhangs it (header-body overflow is
   visible there), so there is no shrink rule for the image. */
#header .header-logo img {
    width: 120px;
    height: 84px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
}

#header .header-nav-wrap {
    display: flex;
    align-items: center;
}

#header .header-nav-main nav > ul {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

#header .header-nav-main nav > ul > li {
    display: flex;
}

#header .header-nav-main nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 .9rem;
    border-radius: 4px;
    cursor: pointer;
    transition: color .2s ease;
}

#header .header-nav-main nav > ul > li > a:hover,
#header .header-nav-main nav > ul > li > a.active {
    color: var(--lp-primary) !important;
}

/* Orange pill hamburger, as on the old site (41x36, #FDAF3D, white bars) */
#header .header-btn-collapse-nav {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--lp-primary);
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: 12.8px;
    padding: 8.5px 14.9px;
    margin-left: 1rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* 12.8px * 1.48 = 18.94px glyph box -> 41x36 button, as on the old site */
#header .header-btn-collapse-nav i {
    color: #fff;
    line-height: 1.48;
}

/* Mobile / tablet — header keeps 116px (70px shrunk) and the logo keeps
   its full 120x84, exactly as on the old site. */
@media (max-width: 991px) {
    #header .header-btn-collapse-nav {
        display: inline-flex;
    }

    /* Old theme: header-nav-main-mobile-dark — the bar itself stays
       transparent and a dark inset panel (:before) sits behind the list. */
    #header .header-nav-main {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: transparent;
        max-height: 0;
        overflow: hidden;
        transition: max-height 300ms ease;
    }

    #header .header-nav-main:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        width: calc(100% - 30px);
        height: 100%;
        background-color: var(--lp-dark);
        transform: translateX(-50%);
    }

    #header .header-nav-main.open {
        max-height: 70vh;
        overflow-y: auto;
    }

    #header .header-nav-main nav {
        padding: 0 30px;
        position: relative;
    }

    #header .header-nav-main nav > ul {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        position: relative;
        z-index: 1;
    }

    #header .header-nav-main nav > ul > li {
        display: block;
        border-bottom: 1px solid #3e3e3e;
    }

    #header .header-nav-main nav > ul > li:last-child {
        border-bottom: 0;
    }

    #header .header-nav-main nav > ul > li > a {
        display: block;
        color: #dedede;
        font-size: 13px;
        padding: 7px 8px;
        border-radius: 0;
    }

    #header .header-nav-main nav > ul > li > a:hover,
    #header .header-nav-main nav > ul > li > a:focus,
    #header .header-nav-main nav > ul > li > a.active {
        background-color: #2b2b2b;
        color: #fff !important;
    }
}

/* ------------------------------------------------------------------
   Hero  (vars + rules taken verbatim from the old theme's custom css)
   ------------------------------------------------------------------ */
.hero {
    --tite-size: 1.5rem;
    --subtite-size: 1.2rem;
    --logo-width: 12rem;
    --title-boarder-width: 25px;
    --title-boarder-height: 10px;
    --title-broder-display: block;
    position: relative;
    width: 100%;
    height: 100vh;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 800px) {
    .hero {
        --tite-size: 1.2rem;
        --subtite-size: 1rem;
        --logo-width: 10rem;
        --title-boarder-width: 22px;
        --title-boarder-height: 8px;
    }
}

@media screen and (max-width: 600px) {
    .hero {
        --tite-size: 1rem;
        --subtite-size: 0.8rem;
        --logo-width: 8rem;
    }
}

@media screen and (max-width: 360px) {
    .hero {
        --title-broder-display: none;
    }
}

.hero .fg {
    position: absolute;
    inset: 0 0 0 0;
    background-color: rgba(0, 0, 0, .7);
}

.hero .wrapper {
    display: grid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    justify-items: center;
    width: 100%;
}

.hero .wrapper .logo {
    opacity: 0;
    aspect-ratio: 6/5;
    width: var(--logo-width);
    animation: lpLogoIn 1s ease 1.2s forwards;
}

.hero .title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0 10px;
}

.hero .title {
    opacity: 0;
    font-weight: 400;
    font-size: var(--tite-size);
    line-height: 1.1;
    color: #fff;
    text-align: center;
    animation: lpTitleIn 1s ease 0s forwards;
}

.hero .subtitle {
    opacity: 0;
    font-weight: 400;
    font-size: var(--subtite-size);
    color: #fff;
    margin-top: 8px;
    margin-bottom: 16px;
    animation: lpSubtitleIn 1s ease .8s forwards;
}

.hero .title-border {
    margin: auto 8px;
    height: var(--title-boarder-height);
    width: var(--title-boarder-width);
    flex: 0 0 var(--title-boarder-width);
    opacity: 0;
    display: var(--title-broder-display);
}

.hero .title-border-left {
    animation: lpBorderLeftIn 1s ease .4s forwards;
}

.hero .title-border-right {
    animation: lpBorderRightIn 1s ease .4s forwards;
}

.hero .cell-phones-btn {
    color: #fff;
    padding: 14px 26px;
    font-size: 1rem;
    font-weight: 700;
    opacity: 0;
    margin-top: 24px;
    animation: lpButtonIn 1s ease 1.4s forwards;
}

/* GSAP entrance timeline replicated with keyframes ---------------- */
@keyframes lpTitleIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lpSubtitleIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lpLogoIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes lpBorderLeftIn {
    from {
        opacity: 0;
        transform: translateX(-35px);
    }
    to {
        opacity: .5;
        transform: translateX(0);
    }
}

@keyframes lpBorderRightIn {
    from {
        opacity: 0;
        transform: translateX(35px);
    }
    to {
        opacity: .5;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero .wrapper .logo,
    .hero .title,
    .hero .subtitle,
    .hero .cell-phones-btn {
        animation: none;
        opacity: 1;
    }

    .hero .title-border {
        animation: none;
        opacity: .5;
    }
}

/* ------------------------------------------------------------------
   About
   ------------------------------------------------------------------ */
#about {
    padding-top: 24px;
    padding-bottom: 24px;
}

#about .about-inner {
    padding: 0 8px;
    margin: 48px 0;
}

@media (min-width: 992px) {
    #about .about-inner {
        padding: 48px 8px;
    }
}

#about h2 {
    font-size: 2.2em;
    font-weight: 700;
    color: #212529;
    margin: 0 0 24px;
    line-height: 1.4;
}

#about h2 i {
    font-style: italic;
}

#about p {
    color: #777;
    margin: 0 0 24px;
}

/* ------------------------------------------------------------------
   Cell phones section
   ------------------------------------------------------------------ */
#phones {
    background-color: var(--lp-grey-bg);
    padding: 4rem 1rem;
    border: 0;
    margin: 0;
}

#phones h2 {
    font-weight: 400;
    font-size: 2.2em;
    color: #212529;
    line-height: 1.4;
    margin: 0 0 48px;
}

#phones .phone-header {
    color: #000;
    font-size: 2rem;
    padding: 2rem;
}

#phones .phones-carousel-wrap {
    margin-bottom: 48px;
    position: relative;
}

#phones .phone-items {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
    border-radius: 3% !important;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    overflow: hidden;
}

#phones .phone-box {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 2rem;
    text-align: center;
    color: inherit;
}

#phones .phone-box img {
    height: 250px;
    object-fit: contain;
    width: 100%;
    padding: 1.5rem;
}

#phones .phone-box .card-title {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin: 16px 0 0;
    line-height: 1.3;
    min-height: 2.6em;
}

#phones .phone-box .card-footer {
    display: flex;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 8px 6.4px 3.2px;
}

.prices {
    text-align: center;
}

.prices .price {
    font-weight: 700;
    color: var(--lp-primary);
}

.retail_price {
    color: rgba(0, 0, 0, .6);
    margin-left: .35rem;
}

/* Owl carousel arrows — clean disc with a CSS-drawn chevron */
#phones .owl-carousel .owl-nav {
    top: 50%;
    position: absolute;
    width: 100%;
    margin-top: 0;
    transform: translate3d(0, -50%, 0);
    pointer-events: none;
}

#phones .owl-carousel .owl-nav button.owl-prev,
#phones .owl-carousel .owl-nav button.owl-next {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
    outline: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}

#phones .owl-carousel .owl-nav button.owl-prev {
    left: 2px !important;
}

#phones .owl-carousel .owl-nav button.owl-next {
    right: 2px !important;
}

/* Hide Owl's default text, draw the chevron ourselves */
#phones .owl-carousel .owl-nav button.owl-prev span,
#phones .owl-carousel .owl-nav button.owl-next span {
    display: none;
}

#phones .owl-carousel .owl-nav button.owl-prev:before,
#phones .owl-carousel .owl-nav button.owl-next:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2.5px solid #333;
    border-right: 2.5px solid #333;
    border-radius: 1px;
    transition: border-color .2s ease;
}

#phones .owl-carousel .owl-nav button.owl-prev:before {
    transform: translateX(3px) rotate(-135deg);
}

#phones .owl-carousel .owl-nav button.owl-next:before {
    transform: translateX(-3px) rotate(45deg);
}

#phones .owl-carousel .owl-nav button.owl-prev:hover,
#phones .owl-carousel .owl-nav button.owl-next:hover {
    background: var(--lp-primary);
    border-color: var(--lp-primary);
    box-shadow: 0 8px 22px rgba(253, 175, 61, .35);
    transform: translate3d(0, -50%, 0) scale(1.06);
}

#phones .owl-carousel .owl-nav button.owl-prev:hover:before,
#phones .owl-carousel .owl-nav button.owl-next:hover:before {
    border-color: #fff;
}

#phones .owl-carousel .owl-nav button.owl-prev:focus-visible,
#phones .owl-carousel .owl-nav button.owl-next:focus-visible {
    box-shadow: 0 0 0 3px rgba(253, 175, 61, .45);
}

#phones .owl-carousel .owl-nav button.disabled {
    opacity: .3;
    cursor: default;
    box-shadow: none;
}

#phones .owl-carousel .owl-nav button.disabled:hover {
    background: #fff;
    border-color: #e6e6e6;
    transform: translate3d(0, -50%, 0);
}

#phones .owl-carousel .owl-nav button.disabled:hover:before {
    border-color: #333;
}

#phones .owl-carousel .owl-nav.disabled {
    display: none;
}

@media (max-width: 575px) {
    #phones .owl-carousel .owl-nav button.owl-prev,
    #phones .owl-carousel .owl-nav button.owl-next {
        width: 40px;
        height: 40px;
    }
    #phones .owl-carousel .owl-nav button.owl-prev:before,
    #phones .owl-carousel .owl-nav button.owl-next:before {
        width: 10px;
        height: 10px;
    }
}

#phones .owl-carousel .owl-stage {
    display: flex;
}

#phones .owl-carousel .owl-item {
    display: flex;
    height: auto;
}

#phones .owl-carousel .owl-item > div {
    display: flex;
    width: 100%;
    padding: 10px 0;
}

#phones .phones-empty {
    text-align: center;
    color: #777;
    padding: 2rem 0 3rem;
}

/* ------------------------------------------------------------------
   Footer / contact
   ------------------------------------------------------------------ */
#footer {
    background: #fff;
    border: 0;
    padding-top: 3rem;
    margin: 0;
    position: relative;
    clear: both;
}

#footer h2.contact-heading {
    font-weight: 400;
    color: #212529;
    text-align: center;
    font-size: 2.07em;
    line-height: 1.4;
    margin: 48px 0 24px;
}

#footer .featured-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

#footer .featured-boxes .col-3 {
    width: 25%;
    padding: 0 15px;
}

#footer .featured-boxes .col-6 {
    width: 50%;
    padding: 0 15px;
}

@media (max-width: 767px) {
    #footer .featured-boxes .col-3,
    #footer .featured-boxes .col-6 {
        width: 100%;
        margin-bottom: 1.5rem;
    }
}

#footer .featured-box {
    background: none;
    border: 0;
    margin: 10px 0;
    box-shadow: none;
    text-align: center;
}

#footer .featured-box .box-content {
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
    display: grid;
    place-items: center;
}

#footer .featured-box .icon-featured {
    display: inline-block;
    font-size: 35px;
    height: 45px;
    line-height: 45px;
    padding: 0;
    width: 45px;
    margin-top: 0;
    margin-bottom: 10px;
    background: transparent;
    border-radius: 0;
    color: var(--lp-primary);
}

#footer .featured-box p.label,
#footer .featured-box span.label {
    display: block;
    font-size: .9em;
    opacity: .7;
    line-height: 1;
    margin: 0 0 .35rem;
    color: #777;
}

#footer .featured-box h2 {
    font-weight: 700;
    color: #212529;
    font-size: 1.35em;
    line-height: 1.4;
    margin: 0;
}

#footer .featured-box p.value {
    font-weight: 700;
    color: #212529;
    font-size: 1.35em;
    line-height: 1.4;
    margin: 0 0 .35rem;
}

#footer .featured-box a {
    color: #212529;
    transition: color .15s ease-in-out;
}

#footer .featured-box a:hover {
    color: var(--lp-primary);
}

/* Contact form (Porto "form-style-3") */
#footer .contact-form-wrap {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}

#footer .contact-form-inner {
    max-width: 570px;
    margin: 0 auto;
}

#footer form {
    opacity: .95;
}

#footer .form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

#footer .form-group {
    padding: 0 8px;
    margin-bottom: 1.1rem;
    width: 100%;
}

#footer .form-group.half {
    width: 50%;
}

@media (max-width: 575px) {
    #footer .form-group.half {
        width: 100%;
    }
}

#footer .form-control {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13.6px;
    line-height: 1.5;
    color: #495057;
    background-color: #F4F4F4;
    background-clip: padding-box;
    border: none;
    border-radius: 6px;
    height: auto;
    transition: box-shadow .15s ease-in-out;
}

#footer .form-control::placeholder {
    color: #202528;
    opacity: .5;
}

#footer .form-control:focus {
    outline: 0;
    box-shadow: 0 0 0 .15rem rgba(253, 175, 61, .35);
}

#footer textarea.form-control {
    resize: vertical;
    min-height: 110px;
}

#footer .default-captcha-container {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0 8px 1.1rem;
}

#footer .default-captcha-container input {
    flex: 1 1 160px;
    min-width: 140px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13.6px;
    background-color: #F4F4F4;
    border: none;
    border-radius: 6px;
}

#footer .default-captcha-container .captcha-image-container {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
}

#footer .default-captcha-container .captcha-image-container img {
    height: 40px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}

#footer .default-captcha-container .refresh-icon {
    display: inline-flex;
    transition: transform .4s ease;
}

#footer .default-captcha-container .refresh-icon.rotate-active {
    transform: rotate(180deg);
}

#footer .d-none {
    display: none !important;
}

/* Dark curved copyright band */
.footer-copyright {
    background: var(--lp-darker);
    display: flex;
    align-items: center;
    position: relative;
    min-height: 7.2vw;
}

.footer-copyright:after {
    content: '';
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgaWQ9IiIgdmlld0JveD0iMCAwIDE5MjAgMTM2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCgl4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIg0KCXg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTkyMHB4IiBoZWlnaHQ9IjEzNnB4Ig0KPg0KCTxnIGlkPSJsYXllcjEiPg0KCQk8cGF0aCBkPSJNIDAgMC4xMSBMIDAgMTM2IEwgMTkyMCAxMzYgTCAxOTIwIDEuOSBDIDE2NTAuMDQ4MiA3OS4wOTU1IDEzMjcuMDY0OCAxMzQgOTgwIDEzNCBDIDYxNS42MjE4IDEzNCAyNzcuNzg3OCA4NC41MDU5IDAgMC4xMSBaIiBmaWxsPSIjZmZmZmZmIi8+DQoJPC9nPg0KPC9zdmc+);
    background-size: 100% 100%;
    background-position: center;
    position: absolute;
    left: 0;
    top: -2px;
    bottom: auto;
    width: 100vw;
    height: 7.2vw;
    transform: rotateX(180deg);
    z-index: 0;
}

.footer-copyright .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 2.5rem 15px;
}

.footer-copyright p {
    color: #555;
    margin: 0;
    padding: 0;
    font-size: .9em;
    text-align: center;
}

.footer-copyright p strong {
    font-weight: 400;
    color: #fff;
    opacity: .7;
}

/* ------------------------------------------------------------------
   Store alert container (layouts.front-end.partials._alert-message)
   Mirrors public/assets/front-end/css/custom.css so the restock alert
   stays hidden until it is activated (that CSS is not loaded here).
   ------------------------------------------------------------------ */
.alert--container {
    position: fixed;
    right: 20px;
    top: 80px;
    z-index: 9999;
    width: 80vw;
    max-width: 330px;
}

.alert--container:not(.active) {
    opacity: 0;
    visibility: hidden;
}

.alert--container .alert {
    position: unset !important;
    margin-bottom: 10px;
    width: 100% !important;
}

.alert--container .alert:not(.active) {
    display: none;
}

/* ------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------ */
.lp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}