/*!
Theme Name: Local Locker Child
Theme URI: http://underscores.me/
Author: Invictus Studio
Author URI: http://invictusstudio.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alpha
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

alpha is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


body {
    overflow-x: hidden;
    line-height: 1.5;
    color: #000;
}

ul {
    padding: 0;
    margin: 0;
}

.section {
    padding: 50px 0;
}

a {
    text-decoration: none !important;
    transition: 0.5s ease !important;
}

a,
input,
button {
    outline: 0 !important;
}

.post,
.page {
    margin: 0;
}

body,
p {
    font-weight: 400;
    color: #000;
    font-family: 'Proxima Nova Rg';
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    font-family: 'Proxima Nova Lt';
}

.home .entry-title {
    display: none;
}

ul li,
li {
    list-style: none;
}

.skip-link.screen-reader-text {
    display: none;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: inherit;
    opacity: 1;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: inherit;
    opacity: 1;
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: inherit;
    opacity: 1;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: inherit;
    opacity: 1;
}

#sidebar {
    display: none;
}

.entry-footer {
    clear: both;
}

#colophon {
    clear: both;
}
/* .page-template-page_templates {
    --ll-container: 1344px; 
    --ll-container-pad: 12px;
} */


/* 404 - NOT FOUND PAGE */

.error-404.not-found {
    text-align: center;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    position: relative;
    background-image: url(/wp-content/uploads/2020/10/404.jpg);
    background-size: cover;
}

.not_found_inner {
    max-width: 69.5%;
}

.error404 #masthead,
.error404 #colophon {
    display: none;
}

.logo a {
    outline: 0 !important;
}

.error-404.not-found .logo {
    padding: 0;
    background-color: transparent;
}

.error-404.not-found h1 {
    font-size: 200px;
    line-height: 1;
    color: #404040;
    margin: 30px 0;
    ;
    font-weight: 800;

}

.error-404.not-found h1 span {
    color: #e01e26;
}

.page-header h3 {
    color: #000;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 40px;
}

.page-header p {
    font-size: 22px !important;
    color: #000;
    margin-bottom: 20px;
}

.page-content .return_home {
    background-color: #e01e26;
    color: #fff;
    padding: 20px 50px;
    display: inline-block;
    font-size: 20px;
    box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    border: 2px solid #e01e26;
}

.page-content .return_home:hover {
    transform: translateY(-3px);
    background-color: transparent;
    color: #000;
    transform: scale(1.1);
}


/* 404 - NOT FOUND PAGE ENDS */

/*SEARCH RESULTS - NO RESULTS CSS */


.search-results article.product,
.search-results article.page {
    display: none;
}

.search-results .page-title span::before,
.search-results .page-title span::after {
    content: '"';
}

.search-results .page-title {
    font-weight: bold;
    font-size: 28px;
    text-align: center;
    margin-bottom: 30px;
}

.search-results .page-header {
    width: 100%;
}

.search-results #primary {
    display: flex;
    flex-wrap: wrap;
}

.search-results #primary article {
    width: 30%;
    margin: 0 1.5%;
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
    padding: 20px;
    padding-top: 0;
    margin-bottom: 35px;
    border-radius: 6px;
}

.search-results #primary article a.post-thumbnail {
    display: block;
    margin-left: -20px;
    margin-right: -20px;
}

.search-results #primary article a.post-thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.search-results #primary article .entry-title a {
    display: block;
    color: #000;
    font-size: 24px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 20px;
}

.no-results.not-found {
    text-align: center;
    margin-bottom: 50px;
}

.no-results.not-found .search-form input.search-field {
    height: 45px;
    padding-left: 10px;
    border: 1px solid #eee;
    background-color: #eee;
    color: #333;
    font-size: 14px;
    width: 250px;
}

.no-results.not-found .search-form .search-submit {
    height: 45px;
    padding: 0 30px;
    border: 0;
    background-color: #0b204d;
    color: #fff;
    cursor: pointer;
}

.no-results.not-found .search-form .search-submit:hover {
    background-color: #252525;
}

.no-results.not-found .search-form label span {
    display: none;
    width: 0;
}




/*SEARCH RESULTS - NO RESULTS CSS ENDS*/


/* Modal box CSS*/

.modal {
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
    background-color: transparent !important;
    border: 0px solid rgba(0, 0, 0, .2) !important;
}

.modal-footer {
    display: none !important;
}

.modal-header {
    border-bottom: 0px !important;
}

.close {
    color: #000 !important;
    opacity: 1 !important;
    border: 1px solid #fff !important;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #fff !important;
    padding: 0 !important;
    float: left !important;
    margin: 0 !important;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.modal-dialog {
    max-width: 650px !important;
    margin: 50px auto !important;
}

.close span {
    display: block;
    color: #fff;
    position: absolute;
    left: 120%;
    top: 0;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    height: 50px !important;
}

.dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    padding: 15px 15px 15px 40px !important;
}

.dgwt-wcas-details-main-image img {
    max-height: 200px !important;
}

.dgwt-wcas-suggestion-selected {
    background-color: #0b204d;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-st {
    color: #fff;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-sp {
    color: #fff;
}

.dgwt-wcas-pd-addtc .add_to_cart_inline {
    margin-left: 20px;
}

.asl_nores {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.results .asl_nores .asl_keyword {
    padding: 5px 0px !important;
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
    border-top: 1px solid #eee;
}

.asl_nores_header {
    margin-bottom: 10px !important;
}

/*  Modal CSS ENDS */


/*  Drop down menu CSS*/
#primary-menu {
    text-align: center;
}

#primary-menu li {
    display: inline-block;
    padding: 0 10px;
}

#primary-menu li a {
    padding: 10px 0;
    color: #000;
}

.menu-item-has-children {
    position: relative;
}

.menu-item-has-children::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    right: -5px;
    top: 2px;
    display: block;
}

.menu-item-has-children .sub-menu {
    position: absolute;
    z-index: 99;
    background-color: #fff;
    box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.15);
    top: calc(100% + 10px);
    left: 10px;
    width: 220px;
    border-radius: 5px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease-in-out;
    visibility: hidden;
    overflow: hidden;
}

.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#primary-menu .sub-menu li {
    display: block;
    padding: 0;
}

#primary-menu .sub-menu li a:hover {
    color: #fff;
    border-color: transparent;
}

#primary-menu .sub-menu li a {
    display: block;
    text-align: left;
    padding: 17px 10px;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 9;
    transition: all 0.5s ease-in-out;
}

#primary-menu .sub-menu li:last-child a {
    border-bottom: 0;
}

#primary-menu .sub-menu li a:hover::before {
    width: 100%;
    background-color: #0b204d;
    border-color: #0b204d;
}

#primary-menu .sub-menu li a::before {
    content: '';
    background-color: transparent;
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s ease-in-out;
    z-index: -1;
    border-bottom: 1px solid transparent;
}

.menu-toggle {
    display: none;
}

/*  Drop down menu CSS ENDS */

/*
Nav bar
*/
#mm #primary-menu ul.sub-menu li a {
    padding-left: 35px;
}

#mm #primary-menu .sub-menu li a::before {
    content: unset;
}

#mm ul.sub-menu {
    position: relative;
    visibility: visible;
    opacity: 1;
    transform: translate(0);
    display: block !important;
    height: auto !important;
}

#mml {
    padding: 0 15px;
    color: #ffffff;
}

#mml h4 {
    display: inline-block;
    margin-bottom: 0;
    margin-top: 12px;
}

.mm {
    position: relative;
    background-color: #000;
    min-height: 49px;
}

#mmb {
    position: absolute;
    width: 40px;
    height: 50px;
    margin-right: 15px;
    top: 0;
    right: 0;
    cursor: pointer;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

#mmb span {
    display: block;
    position: absolute;
    height: 1.5px;
    width: 100%;
    background: #ffffff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#mmb span:nth-child(1) {
    top: 16px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#mmb span:nth-child(2) {
    top: 26px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#mmb span:nth-child(3) {
    top: 36px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#mmb.on span {
    height: 2px;
}

#mmb.on span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 11px;
    left: 8px;
}

#mmb.on span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

#mmb.on span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 39px;
    left: 8px;
}

#mm ul {
    padding-left: 0;
    margin-bottom: 0;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 1000;
    display: none;
}

#mm li {
    display: block;
    position: relative;
    padding: 0;
}

#mm #primary-menu a {
    display: block;
    padding: 16px 26px 15px 17px;
    border-bottom: #dedede 1px solid;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 25px;
    background-color: #000;
    word-wrap: break-word;
    text-align: left;
}

#mm #primary-menu a:hover {
    background-color: #0b204d;
}

.mm,
#mm {
    display: none;
}

/* 
 * NAVBAR CSS ENDS
 */

/* WOOCOMMERCE CSS START */

.woocommerce td.product-name a {
    color: #000;
    font-weight: 600;
}

.woocommerce td.product-name a:hover {
    color: #0b204d;
}

input#coupon_code {
    width: 200px !important;
    padding-left: 10px;
    margin-right: 10px;
    height: 45px;
    background-color: #eee;
    border: 0;
    border-radius: 3px;
    font-size: 14px;
}

.coupon .button {
    height: 45px;
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
    color: #fff;
    height: 45px;
}

.actions button {
    height: 45px;
}

.woocommerce a.added_to_cart {
    padding: 10px 20px;
    border-radius: 3px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.added_to_cart,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    color: #fff;
    background-color: #0b204d;
    padding: 10px 20px;
    line-height: 1.5;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    color: #fff;
    background-color: #333;
}

.post-type-archive li .added_to_cart {
    background-color: #0b204d !important;
    color: #fff !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
}

.wc-proceed-to-checkout a,
#place_order {
    background-color: #0b204d !important;
    color: #fff !important;
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    margin-top: 8px !important;
    font-weight: 600 !important;
}

.wc-proceed-to-checkout a:hover,
#place_order:hover {
    background-color: #252525 !important;
    color: #fff !important;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    float: unset;
    display: block;
    width: 100%;
    height: 45px;
}

a.shipping-calculator-button {
    color: #0b204d;
    text-transform: uppercase;
    font-weight: 600;
}

.woocommerce a.remove,
td.product-remove button {
    background: #0b204d !important;
    color: #fff !important;
    line-height: 17px;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
    width: 100px;
}

.woocommerce-cart-form {
    width: 62%;
    float: left;
}

.woocommerce .cart-collaterals {
    width: 35%;
    float: right;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
    float: unset;
    width: 100%;
    background: rgba(84, 84, 84, 0.05);
    padding: 40px 40px 30px;
}

.woocommerce table.shop_table {
    border: 0;
}

#add_payment_method table.cart .product-thumbnail,
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-checkout table.cart .product-thumbnail {
    text-align: center;
}

.woocommerce table.shop_table th {
    color: #000 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px !important;
}

.woocommerce table.shop_table .actions {
    padding-top: 40px !important;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
    position: relative;
    margin-bottom: 30px;
    border-bottom: 1px solid #ebe9eb;
    padding-bottom: 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
}

.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
    font-size: 16px;
    padding-left: 0;
    padding-right: 0;
}

.woocommerce .cart-collaterals table.shop_table td {
    padding-left: 0;
    padding-right: 0;
}

.cart_totals tr:not(:last-child) td {
    padding-bottom: 30px !important;
}

.qib-container button {
    cursor: pointer;
}

.woocommerce-shipping-destination {
    font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    color: #000;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    padding: 10px;
    font-size: 14px;
}

input[type="checkbox"],
input[type="radio"],
.input-radio,
.input-checkbox {
    width: 17px;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    outline-width: medium;
    position: relative;
    border: none;
    cursor: pointer;
    outline-width: 0;
    border-radius: 50%;
    top: 3px;
}

input[type="radio"]::before {
    background: #0b204d;
}

.input-radio::before,
input[type="radio"]::before,
.input-radio::before,
input[type="checkbox"]::before {
    position: absolute;
    left: 0;
    top: 0;
    background: #ccc;
    width: 17px;
    height: 17px;
    display: block;
    border-radius: 50%;
    -webkit-transition: 240ms;
    -o-transition: 240ms;
    transition: 240ms;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.input-radio::before,
input[type="checkbox"]::before {
    border-radius: 0%;
}

input[type="checkbox"]::before,
input[type="checkbox"]::after,
input[type="radio"]::before,
input[type="radio"]::after,
.input-radio::before,
.input-radio::after,
.input-checkbox::before,
.input-checkbox::after {
    content: "";
}

input[type="radio"]::after,
.input-radio::after,
input[type="checkbox"]::after,
.input-checkbox::after,
.widget_product_categories ul li a::before,
.widget_layered_nav ul li a::before,
.post_tags a,
.wpb_widgetised_column .tagcloud a,
.select2-container--default .select2-selection--multiple .select2-selection__choice {

    border-color: rgba(84, 84, 84, 0.8);

}

.input-radio::after,
input[type="radio"]::after {

    border-radius: 50%;

}

input[type="checkbox"]::after,
input[type="radio"]::after,
.input-radio::after,
.input-checkbox::after {
    display: block;
    width: 17px;
    height: 17px;
    border: 2px solid #a5a5a5;
    -webkit-transition: 240ms;
    -o-transition: 240ms;
    transition: 240ms;
}

.input-radio:checked::before,
input[type="radio"]:checked::before,
.input-radio:checked::before,
input[type="checkbox"]:checked::before {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    background: #0b204d;
}

input[type="radio"]:checked::after,
.input-radio:checked::after,
input[type="checkbox"]:checked::after,
.input-checkbox:checked::after,
.return-to-shop .button.wc-backward {
    border-color: #0b204d;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ddd;
    color: #000;
    font-weight: 400;
    height: 45px;
}

.woocommerce form .form-row {
    padding: 3px 0;
    margin: 0 0 06px;
    display: block;
}

#calc_shipping_city_field {
    margin-bottom: 2px;
}

.order-total .woocommerce-Price-amount {
    font-weight: 600 !important;
    font-size: 25px;
}

.woocommerce-checkout .checkout_coupon input#coupon_code {
    width: 100% !important;
    padding-left: 15px !important;
    display: inline-block;
    padding: 6px 10px;
}

.checkout.woocommerce-checkout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
    width: 60%;
}

#order_review {
    width: 38%;
    background: rgba(84, 84, 84, 0.05);
    padding: 20px 40px 40px;
    position: relative;
}

#order_review_heading {
    display: none;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
    float: unset;
    width: 100%;
    max-width: 100%;
}

.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
    float: unset;
    width: 100%;
    max-width: 100%;
}

.checkout_coupon.woocommerce-form-coupon .button {
    height: 45px;
}

.checkout_coupon.woocommerce-form-coupon .form-row-first {
    width: 50%;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table thead td,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table tfoot th {
    border: none;
    vertical-align: top;
}

.woocommerce .shop_table.woocommerce-checkout-review-order-table td {
    padding: 16px 0px;
}

.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td {
    border-top: 1px solid rgba(0, 0, 0, .1) !important;
    padding-top: 40px;
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}

#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
    padding: 0;
    border-bottom: 0;
}

#add_payment_method #payment .payment_method_paypal .about_paypal,
.woocommerce-cart #payment .payment_method_paypal .about_paypal,
.woocommerce-checkout #payment .payment_method_paypal .about_paypal {
    float: right;
    line-height: 20px;
    margin-left: 10px;
    color: #000;
    font-weight: 300;
    font-size: 12px;
    border-bottom: 1px dashed;
}

#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img {
    width: 80px;
}

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
h3#order_review_heading,
#post-79 .entry-title,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-column__title,
.woocommerce-order-details__title,
.woocommerce-Address-title.title h3,
div#customer_login h2 {
    text-transform: uppercase;
    color: #252525;
    font-size: 24px !important;
    font-weight: 700;
    padding-bottom: 20px;
    margin-bottom: 0;
    position: relative;
}

span.select2-selection.select2-selection--single {
    height: 45px !important;
    padding: 9px 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 45px;
    right: 10px;
}

form.checkout.woocommerce-checkout label {
    font-size: 14px;
    margin-bottom: 0px;
    font-weight: 500;
    text-transform: uppercase;
}

#order_comments {
    height: 100px;
}

#add_payment_method #payment ul.payment_methods li,
.woocommerce #payment ul.payment_methods li {
    border-bottom: 1px solid rgba(84, 84, 84, 0.15);
    line-height: 16px;
    padding: 17px 0 14px;
}

#add_payment_method #payment ul.payment_methods li div.payment_box,
.woocommerce #payment ul.payment_methods li div.payment_box {
    background-color: transparent;
    line-height: 1.538em;
    padding: 0 35px;
    margin: 0;
    width: 100%;
    font-size: 1rem;
    margin-top: 20px !important;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.woocommerce #payment div.payment_box p {
    font-size: 13px;
    line-height: 1.4285em;
    margin: -2px 0 0;
    margin-bottom: 0px;
    text-shadow: none;
    font-weight: 400;
    color: #333;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
    content: unset;
}

.woocommerce-privacy-policy-text p {
    font-size: 14px;
    color: #333;
}

.shop_table.woocommerce-checkout-review-order-table thead th,
.shop_table.woocommerce-checkout-review-order-table tfoot th,
.shop_table.woocommerce-checkout-review-order-table tfoot td {
    padding: 10px 0;
}

.woocommerce ul#shipping_method li label {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
}

form.checkout.woocommerce-checkout ul.payment_methods li label {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 14px;
    text-transform: capitalize;
    line-height: 1.3em;
    font-weight: 700;
    color: #000;
    margin-top: 12px;
}

.woocommerce-error {
    border-color: #0b204d !important;
}

.woocommerce-message::before,
.woocommerce-error::before {
    color: #c12a30 !important;
}

.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
    width: 100%;
}

.woocommerce-message a,
a.woocommerce-Button.button,
p.return-to-shop a,
.added_to_cart {
    background-color: #0b204d !important;
    color: #fff !important;
    padding: 10px 22px !important;
    font-size: 16px !important;
    margin-top: 8px !important;
    font-weight: bold;
}

.woocommerce-message a:hover,
a.woocommerce-Button.button:hover,
p.return-to-shop a:hover,
.added_to_cart:hover {
    background-color: #252525 !important;
    color: #fff !important;
}

.woocommerce-message a {
    margin-top: 0 !important;
}

.woocommerce-message,
.woocommerce-notices-wrapper a,
.woocommerce-message::before {
    border-top-color: #0b204d !important;
}

.woocommerce-order-received .woocommerce-customer-details {
    display: none;
}

.woocommerce-order-received p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    color: #0b204d;
}

.woocommerce-order-received .woocommerce table.shop_table tfoot td,
.woocommerce-order-received .woocommerce table.shop_table tfoot th {
    border: 0;
    padding-top: 15px;
}

.woocommerce-order-received .woocommerce table.shop_table tbody td,
.woocommerce-order-received .woocommerce table.shop_table tbody th {
    border-bottom: 3px solid rgba(0, 0, 0, .9);
    margin-bottom: 40px;
    padding: 15px 0;
}

.woocommerce-order-received .woocommerce table.shop_table td,
.woocommerce-order-received .woocommerce table.shop_table th {
    padding: 15px 0;
}

.woocommerce-order-received .woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
    border-collapse: collapse;
}

.woocommerce-order-received .woocommerce td.product-name a {
    color: #0b204d;
    font-weight: 600;
    font-size: 20px;
}

.woocommerce-order-received .woocommerce td.product-name a:hover {
    color: #252525;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
    vertical-align: middle;
    margin-bottom: 0;
    margin-top: 7px;
}

.woocommerce form .form-row.create-account .input-checkbox {
    display: inline-block;
    margin: -2px 8px 0 0;
    text-align: center;
    vertical-align: unset;
}

#ship-to-different-address label span {
    margin-left: 8px;
    font-weight: bold;
    color: #000;
}

.tinv-wishlist .product-action {
    width: 165px;
}

#tinvwl_product_actions {
    height: 45px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.tinvwl-table-manage-list tr td {
    border-top: 1px solid #ccc;
}

.tinvwl-to-left.look_in {
    display: flex;
    flex-wrap: wrap;
}

.select-wrapper {
    flex: 1;
    margin-right: 5px;
    position: relative;
}

.select-wrapper::after {
    content: '\f0d7';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 1;
    pointer-events: none;
    transform: translateY(-50%);
    line-height: 0;
    color: #666;
}

.tinvwl-to-left.look_in .tinvwl-input-group {
    width: 100%;
    border-collapse: collapse;
}

.wishlist_item .product-thumbnail img {
    width: 100px;
    height: auto;
    max-width: unset;
}

.woocommerce-Message.woocommerce-Message--info.woocommerce-info .button {
    margin-top: 0 !important;
}

.woocommerce-account .woocommerce-columns--addresses.col2-set.addresses,
.u-columns.woocommerce-Addresses.col2-set.addresses {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.woocommerce-account .woocommerce-column--shipping-address.col-2,
.woocommerce-account .woocommerce-column--billing-address.col-1,
.u-column1.col-1.woocommerce-Address,
.u-column2.col-2.woocommerce-Address {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 48%;
    flex: 0 0 48%;
    max-width: 48%;
    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
}

.woocommerce-account .col2-set::after,
.woocommerce-account .col2-set::before {
    content: unset;
}

.woocommerce-account .woocommerce .woocommerce-customer-details address {
    border: 0;
    padding: 0 0 10px;
    line-height: 1.8;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tfoot th {
    text-align: right;
    border-top: 0 !important;
    border-right: 1px solid rgba(0, 0, 0, .1);
}

.woocommerce-account .woocommerce table.shop_table {
    border-collapse: collapse;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table th {
    padding: 20px 10px;
}

.woocommerce-account .woocommerce .account-orders-table {
    text-align: center;
}

.woocommerce-account.woocommerce .col2-set,
.woocommerce-account.woocommerce-page .col2-set {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.woocommerce-account #customer_login .col-1,
#customer_login .col-2 {
    flex: 49%;
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
    height: 400px;
}

/*Dashboad*/
nav.woocommerce-MyAccount-navigation ul {
    padding: 0;
    list-style: none;
    margin: 0 !important;
}

nav.woocommerce-MyAccount-navigation ul li a {
    padding: 9px 10px;
    display: block;
    border: 1px solid #0b204d;
    margin-bottom: 9px;
    color: white;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease-in;
    background-color: #0b204d;
}

nav.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #252525;
    color: white;
    border: 1px solid #252525;
}

nav.woocommerce-MyAccount-navigation ul li a:hover {
    color: white !important;
    border: 1px solid #252525;
    background-color: #252525;
}

.woocommerce-account .woocommerce-MyAccount-content a {
    color: #0b204d;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
    color: #252525;
}

form.woocommerce-EditAccountForm fieldset {
    padding-left: 0;
    padding-right: 0;
}

/**DASHBOARD END**/
.woocommerce table.my_account_orders .button {
    background-color: #0b204d;
    color: #fff;
    padding: 8px 25px;
    font-size: 14px;
    border-radius: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
    display: inline-block;
    font-weight: 300;
}

.woocommerce table.my_account_orders .button:hover {
    background-color: #252525;
    color: #fff;
}

.woocommerce-account .addresses .title h3 {
    position: relative;
}








.woocommerce-privacy-policy-text a {
    color: #252525;
}

.woocommerce-privacy-policy-text a:hover {
    color: #0b204d;
}

.woocommerce-info {
    border-top-color: #0b204d;
    margin-bottom: 10px !important;
}

.lost_password a {
    color: #252525 !important;
}

.lost_password a:hover {
    color: #0b204d !important;
}

.woocommerce-info::before {
    color: #0b204d;
}

.woocommerce-form-login-toggle a,
.woocommerce-form-coupon-toggle a,
p.woocommerce-LostPassword.lost_password a {
    color: #252525 !important;
}

.woocommerce-form-login-toggle a:hover,
.woocommerce-form-coupon-toggle a:hover,
.woocommerce-privacy-policy-text a:hover,
p.woocommerce-LostPassword.lost_password a:hover {
    color: #0b204d !important;
}

.woocommerce-privacy-policy-text {
    padding-bottom: 20px;
}

.woocommerce form .form-row .required {
    color: #0b204d;
}

a.showcoupon {
    font-size: 16px;
    font-weight: 500;
}







h3#order_review_heading {
    margin-top: 40px;
}

form.woocommerce-cart-form .product-thumbnail {
    height: auto;
    border: none;
}

.woocommerce-cart-form .woocommerce-Price-amount.amount {
    font-size: 16px;
}

.woocommerce-form-coupon-toggle {
    margin-bottom: 40px;
}


ul.woocommerce-error {
    margin-bottom: 50px !important;
}

.tinv-header {
    display: none;
}

.tinv-wishlist.woocommerce.tinv-wishlist-clear {
    margin-top: 30px;
}





.post-type-archive .products li {
    text-align: center;
}

.tax-product_cat .products li {
    text-align: center;
}

.tax-product_cat li .added_to_cart {
    background-color: #c12a30 !important;
    color: #fff !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    border-radius: 25px !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    margin-top: 8px !important;
    /*    display: inline-block !important; */
    font-weight: 300 !important;
}

.tax-product_cat li .added_to_cart:hover {
    background-color: #252525 !important;
    color: #fff !important;
}

.quantity {
    position: relative;
    width: fit-content;
}

.woocommerce-cart .quantity .minus {
    background: transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 8px 5px 14px 7px !important;
    border-color: #252525;
    font-size: 24px;
    line-height: 0;
}

.woocommerce-cart .quantity .plus {
    background: transparent;
    position: absolute;
    right: 0;
    top: 0px;
    padding: 12px 4px 11px 4px !important;
    border-color: #252525;
    font-size: 24px;
    line-height: 0;
}


a.restore-item {
    margin-left: 10px;
    margin-top: -10px !important;
}

.page-id-317 .woocommerce-form-login {
    height: 492px;
}

.woocommerce-order-received .woocommerce-order-details__title {
    position: relative;
}

.woocommerce-order-received .woocommerce-column__title {
    position: relative;
}


.page-id-316 .wc-backward {
    margin-left: 20px !important;
    color: #252525 !important;
}

.page-id-316 .wc-backward:hover {
    color: #c12a30 !important;
}


.page-id-317 .woocommerce-MyAccount-content .woocommerce-Button {
    position: relative;
    top: -10px !important;
}

/* Woo Commerce End Here */



.leaflet-bottom.leaflet-right {
    display: none;
}





@media (min-width: 1200px) {
    .container {
        max-width: 1170px !important;
    }
}


@media (min-width: 1250px) {
    .container {
        max-width: 1240px !important;
    }
}



@media (max-width: 767px) {

    .mm,
    #mm {
        display: block;
    }

    #primary-menu {
        display: none;
    }
}


/* =========================================================================
   LOCAL LOCKER — DESIGN SYSTEM
   Desktop / base styles only. Every media query lives in css/responsive.css
   Breakpoints: mobile 0-480 | tablet 481-768 | laptop 769-1024 | desktop 1025+
   ========================================================================= */

:root {
    --ll-black: #000000;
    --ll-white: #ffffff;
    --ll-red: #ED1C24;
    --ll-red-btn: #EB1F27;
    --ll-text: #FAFAFA;
    --ll-border: #333333;

    --ll-font: 'Jost', sans-serif;

    /*
     * The design specifies "Nexa Bold" for the testimonial author and slide
     * counter. Nexa is a commercial face and is not bundled, so Jost 700 stands
     * in. Drop a Nexa @font-face into the theme and it is picked up here.
     */
    --ll-font-display: 'Nexa Bold', 'Jost', sans-serif;

    --ll-shadow-red: 0 8px 10px rgba(235, 31, 39, 0.3);

    /* Hairline between the category columns in the Browse by Category strip. */
    --ll-divider: #A5A5A5;

    /*
     * Main container: 1600px of content on desktop, centred in the viewport.
     * Only content that sits inside a container in the Figma design is wrapped
     * in it — full-bleed artwork (light rays, glows, the hero product scatter,
     * the footer shell) stays outside and spans the viewport.
     * Side padding is introduced in css/responsive.css below 1660px.
     */
    /* --ll-container: 1600px;
    --ll-container-pad: 0px; */
    --ll-container: 1344px; /* 1320px content + the two 12px gutters */
    --ll-container-pad: 12px;

    /*
     * Type scale — ONE scale for the whole site.
     *
     * These are the inner pages' roles (css/inner-pages.css declares the same
     * names with the same values for its own sheet). The home page was authored
     * straight off the 1920px Figma frame — an 80px hero, 70px section titles,
     * a 30px eyebrow — which read a size and a half too big beside every inner
     * page once both were on screen, and had to be re-declared at each
     * breakpoint to come down. The roles below are clamped instead, so one
     * declaration covers 300px to 3200px and both halves of the site agree.
     *
     * Preferred sizes are vw-based; the floor is what a 300px phone gets and
     * the ceiling is the desktop figure.
     */
    --ll-fs-title: clamp(30px, 4.4vw, 70px);   /* page / hero headline */
    --ll-fs-h2: clamp(28px, 2.5vw, 40px);      /* section heading */
    --ll-fs-h3: clamp(20px, 1.6vw, 24px);      /* card heading */
    --ll-fs-h4: clamp(17px, 1.3vw, 20px);      /* small heading, attribution */
    --ll-fs-lead: clamp(16px, 1.5vw, 24px);    /* standfirst, long copy */
    --ll-fs-body: clamp(15px, 1.2vw, 18px);
    --ll-fs-meta: 16px;
    --ll-fs-small: 14px;

    /* The eyebrow above a section heading: the inner pages' .ll-kicker. */
    --ll-fs-kicker: 14px;
    --ll-kicker-tracking: 0.28em;
}

/*
 * Every size taken from Figma includes its padding and border, so border-box is
 * required. Bootstrap already sets this, but the design must not depend on it.
 */
.ll-home,
.ll-header,
.ll-footer,
.ll-home *,
.ll-home *::before,
.ll-home *::after,
.ll-header *,
.ll-header *::before,
.ll-header *::after,
.ll-footer *,
.ll-footer *::before,
.ll-footer *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--ll-black);
    color: var(--ll-white);
    font-family: var(--ll-font);
}

body,
p {
    font-family: var(--ll-font);
}

p {
    color: inherit;
}

.ll-container {
    width: 100%;
    max-width: var(--ll-container);
    margin: 0 auto;
    padding: 0 var(--ll-container-pad);
}

/*
 * The home page reads the inner pages' content rail.
 *
 * The 1600px rail above only ever inset the page once the viewport passed
 * 1600px; below that the sections ran to within 24px of both edges, so a 1440
 * desktop and every tablet started hard against the left edge while the inner
 * pages — on the reference's stepped, Bootstrap-style container — sat in a
 * proper column. One rail for the whole site now: 1320px of content inside two
 * 12px gutters, stepping down with the viewport (see css/responsive.css) and
 * scoped to the front page, so the 1600px rail stays the default elsewhere.
 *
 * Full-bleed things are unaffected: the hero's conveyor (.ll-hero__orbit) is
 * positioned against the section, not the rail, and the marquee and the
 * features slider read the rail deliberately so they stay aligned to it.
 */
body.home {
    --ll-container: 1344px;
    --ll-container-pad: 12px;
}

/* Shared section heading block ------------------------------------------- */

/*
 * Figma's centred heading frames are 1434.97px wide inside the container, not
 * the full container width — the narrower measure is what makes the long titles
 * wrap where the design wraps them.
 */
.ll-heading {
    display: flex;
    flex-direction: column;
    /* The kicker sits close to its title, as .ll-sechead does on inner pages. */
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 1434.97px;
    margin: 0 auto;
    text-align: center;
}

/* Left-aligned variant, used where the heading sits next to a CTA button. */
.ll-heading--start {
    align-items: flex-start;
    max-width: none;
    margin: 0;
    text-align: left;
}

/* The testimonials heading is full-width in the design. */
.ll-testimonials .ll-heading {
    max-width: none;
}

/*
 * The eyebrow is the inner pages' .ll-kicker role: a 14px spaced uppercase
 * label, not the 30px line the Figma frame carries. Its colour is unchanged.
 */
.ll-heading__eyebrow {
    margin: 0;
    width: 100%;
    font-family: var(--ll-font);
    font-weight: 600;
    font-size: var(--ll-fs-kicker);
    line-height: 1.2;
    letter-spacing: var(--ll-kicker-tracking);
    text-transform: uppercase;
    color: var(--ll-white);
    opacity: 0.5;
}

/*
 * "FAQs", not "FAQS". FAQ is an initialism and its plural s is a lowercase
 * suffix, not part of the abbreviation — every style guide sets it that way,
 * and Figma writes this label mixed-case too (node 330:1453). The eyebrow's
 * uppercase transform was overriding the authored string, so this one section
 * keeps the letters it was written with; they are already capitals.
 */
#faq .ll-heading__eyebrow {
    text-transform: none;
}

/* The section-heading role, shared with the inner pages' .ll-page__h2. */
.ll-heading__title {
    margin: 0;
    width: 100%;
    font-family: var(--ll-font);
    font-weight: 600;
    font-size: var(--ll-fs-h2);
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--ll-white);
}

/* Buttons ---------------------------------------------------------------- */

.ll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 50px;
    padding: 11px 27px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--ll-font);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.2;
    color: var(--ll-white);
    white-space: nowrap;
    cursor: pointer;
}

.ll-btn--outline {
    background-color: transparent;
    border-color: var(--ll-white);
}

/*
 * Brand red on hover, as the reference's outline buttons behave (.cmore
 * button:hover in the browse UI kit): red text and a red hairline, never the
 * inverted white block the starter theme shipped with.
 */
.ll-btn--outline:hover {
    background-color: rgba(237, 28, 36, 0.08);
    border-color: var(--ll-red);
    color: var(--ll-red);
}

.ll-btn--primary {
    background-color: var(--ll-red);
}

.ll-btn--primary:hover {
    background-color: #c4141b;
    color: var(--ll-white);
}

.ll-btn__icon {
    display: block;
    flex-shrink: 0;
}

.ll-btn__icon--arrow {
    width: 12.91px;
    height: 10.14px;
}

.ll-btn--lend {
    width: 199px;
}

/* =========================================================================
   HEADER
   ========================================================================= */

.ll-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 30;
    padding-top: 19px;
}

/*
 * The admin bar's offset, for the one element that has to apply it by hand.
 *
 * WordPress clears its fixed bar by putting `margin-top` on <html>, which moves
 * everything in normal flow — every inner page's header included, since those
 * are static. The home page's header is absolutely positioned against the
 * initial containing block, and that block is anchored to the top of the canvas,
 * above the html margin: `top: 0` therefore sat *behind* the bar, and a
 * logged-in visitor saw the logo clipped on the home page while every inner
 * page cleared it. Measured: logo at 19px on the home page against 51px
 * (32 + 19) everywhere else.
 *
 * Scoped to the home page because that is the only place the header is
 * absolute — `top` on the static inner-page header would push it down instead.
 * The bar is 46px below 783px, which css/responsive.css carries.
 */
body.home.admin-bar .ll-header {
    top: 32px;
}

/* Inner pages keep the header in the flow until they get their own pass. */
body:not(.home) .ll-header {
    position: relative;
    padding-bottom: 19px;
    background-color: var(--ll-black);
}

/*
 * z-index is above the mobile drawer, which is a child of this same header and
 * therefore painted inside its stacking context: without this the full-screen
 * drawer covers the logo and — worse — the toggle that closes it.
 */
.ll-header__inner {
    position: relative;
    z-index: 26;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 73px;
}

.ll-header__logo {
    display: block;
    flex-shrink: 0;
}

.ll-header__logo img {
    display: block;
    width: 156px;
    height: 73px;
}

.ll-header__nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ll-nav {
    display: flex;
    align-items: center;
    gap: 51px;
    margin: 0;
    padding: 0;
}

.ll-nav__item {
    list-style: none;
}

.ll-nav__link {
    display: block;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--ll-white);
    white-space: nowrap;
}

.ll-nav__link:hover {
    color: var(--ll-red);
}

/*
 * The current page reads in brand red, exactly as the reference's SiteHeader
 * paints its activeLink — so "Browse Gear" is highlighted while you are on it.
 * The class is already printed by header.php; it just had no rule.
 */
.ll-nav__link.is-active,
.ll-mobile-nav__link.is-active {
    color: var(--ll-red);
}

.ll-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Mobile nav (hidden on desktop) ----------------------------------------- */

.ll-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ll-nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background-color: var(--ll-white);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ll-nav-toggle[aria-expanded="true"] .ll-nav-toggle__bar:nth-child(2) {
    transform: translateY(7px) rotate(45deg);
}

.ll-nav-toggle[aria-expanded="true"] .ll-nav-toggle__bar:nth-child(3) {
    opacity: 0;
}

.ll-nav-toggle[aria-expanded="true"] .ll-nav-toggle__bar:nth-child(4) {
    transform: translateY(-7px) rotate(-45deg);
}

/*
 * The drawer was a block in the flow, sitting under the header: it covered the
 * top of the page and left the rest of it visible and scrolling behind, which
 * is the "opens only half screen" report.
 *
 * Fixed and full-bleed instead, so it is unambiguously a menu and nothing shows
 * through. z-index sits under the header (30), which keeps the logo and the
 * toggle — now an X — on top of it, so the way out is always visible; the top
 * padding clears that row.
 */
.ll-mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 25;
    /*
     * Top padding clears the header the drawer opens under, so the first menu
     * label starts below the logo rather than behind it. Side padding is the
     * header's rail instead of a number of its own — see .ll-mobile-nav__inner.
     */
    padding: 132px 0 40px;
    background-color: #0a0a0a;
    border-top: 1px solid var(--ll-border);
    overflow-y: auto;
    /* Scrolling to the end of the menu must not start scrolling the page. */
    overscroll-behavior: contain;
}

/*
 * The admin bar pushes the header down with a margin on <html>, but this panel
 * is position: fixed — its containing block is the viewport, above that margin
 * — so the header moved down and the menu did not. The first label then landed
 * ON the logo (measured: an 8px overlap at 390px, 17px at 768px). The same
 * offset the bar adds, added here.
 */
body.admin-bar .ll-mobile-nav {
    padding-top: 164px;
}

.ll-mobile-nav__inner {
    display: flex;
    flex-direction: column;
}

/*
 * Set on <html> while the drawer is open. Both elements, because either one can
 * be the scrolling box depending on the browser.
 */
.ll-nav-open,
.ll-nav-open body {
    overflow: hidden;
}

.ll-mobile-nav__list {
    margin: 0;
    padding: 0;
}

.ll-mobile-nav__link {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--ll-border);
    font-family: var(--ll-font);
    font-size: 18px;
    color: var(--ll-white);
}

.ll-mobile-nav__link.is-active,
.ll-mobile-nav__link:hover {
    color: var(--ll-red);
}

.ll-mobile-nav__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.ll-footer {
    position: relative;
    background-color: var(--ll-black);
    clear: both;
}

/*
 * The footer shell is full-bleed; its contents share the 1600px container so
 * the logo lines up with the header logo. (Figma drifts between 133/137/150px
 * side margins across frames — normalised to the one container.)
 */
.ll-footer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 66.81px;
    width: 100%;
    max-width: var(--ll-container);
    margin: 0 auto;
    /* padding: 93.53px var(--ll-container-pad); */
    padding: 0 var(--ll-container-pad);
}

.ll-footer__cols {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Brand column ---------------------------------------------------------- */

/*
 * Figma groups the logo + paragraph with no gap (the paragraph carries its own
 * 21.378px top padding) and then puts 20px before the social row.
 */
.ll-footer__brand {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ll-footer__logo {
    display: block;
}

.ll-footer__logo img {
    display: block;
    width: 156px;
    height: 73px;
}

.ll-footer__about {
    margin: 21.38px 0 0;
    max-width: 394px;
    font-family: var(--ll-font);
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: var(--ll-white);
    opacity: 0.7;
}

.ll-social {
    display: flex;
    align-items: center;
    gap: 21.38px;
    margin: 20px 0 0;
    padding: 0;
}

.ll-social__item {
    list-style: none;
}

/*
 * The badge circle is drawn here and the glyph is inlined in currentColor (see
 * ll_social_glyph), which is what lets the whole badge recolour. All four share
 * one resting state: white circle, #252525 ink from the original artwork.
 */
.ll-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58.79px;
    height: 58.79px;
    border-radius: 50%;
    background-color: var(--ll-white);
    color: #252525;
}

.ll-social__glyph {
    display: block;
    flex-shrink: 0;
}

/*
 * Hover / keyboard focus: every badge takes the Facebook treatment — a solid
 * brand-red circle with a white glyph. Nothing moves; the fade comes from the
 * theme's global anchor transition. The glow is this badge's own — the buttons
 * dropped theirs, and a 50px circle is a different thing from a pill.
 */
.ll-social__link:hover,
.ll-social__link:focus-visible {
    opacity: 1;
    background-color: var(--ll-red);
    color: var(--ll-white);
    box-shadow: var(--ll-shadow-red);
}

/* Link columns ---------------------------------------------------------- */

/*
 * Two blocks in this half, not three.
 *
 * The Company column is gone (see footer.php), and with it 205px of the 810px
 * this half carries — leaving the links bunched against the middle with a
 * stretch of nothing to their right. The two that remain sit at either end of
 * the half instead, so the footer reads as three evenly spread blocks: brand,
 * links, subscribe. The 100px gap stays as the floor for the narrow steps,
 * where space-between has nothing to distribute.
 */
.ll-footer__links {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 100px;
}

.ll-footer__col {
    flex-shrink: 0;
}

/*
 * Sized by its widest label rather than the 93px the three-item column needed:
 * it now carries "Browse Gear" and "Lend Gear" as well.
 */
.ll-footer__col--explore {
    width: auto;
}

.ll-footer__col--subscribe {
    width: 273.66px;
}

.ll-footer__col-title {
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 700;
    font-size: 18px;
    line-height: 20.04px;
    letter-spacing: 2.0042px;
    text-transform: uppercase;
    color: var(--ll-white);
}

.ll-footer__list {
    display: flex;
    flex-direction: column;
    gap: 13.36px;
    margin: 0;
    padding: 21.38px 0 0;
}

.ll-footer__list-item {
    list-style: none;
}

.ll-footer__link {
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 26.72px;
    color: var(--ll-white);
    opacity: 0.6;
    white-space: nowrap;
}

.ll-footer__link:hover {
    opacity: 1;
    color: var(--ll-red);
}

/* Matches .ll-nav__link.is-active: the same current page stays highlighted
 * in the footer as in the header. */
.ll-footer__link.is-active {
    opacity: 1;
    color: var(--ll-red);
}

/* Subscribe ------------------------------------------------------------- */

.ll-footer__subscribe-text {
    margin: 21.38px 0 0;
    max-width: 262px;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.5);
}

/*
 * The form is only the column the pill and the reCAPTCHA stack in; the pill
 * itself is .ll-subscribe__field, so the widget gets a row of its own below it.
 */
.ll-subscribe {
    width: 398.17px;
    margin-top: 13.36px;
}

.ll-subscribe__field {
    display: flex;
    align-items: center;
    gap: 18.07px;
    width: 100%;
    height: 53.45px;
    padding: 0 13.36px 0 24.05px;
    background-color: var(--ll-white);
    border-radius: 90.36px;
    box-shadow: 0 3.61px 27.11px rgba(0, 0, 0, 0.1);
}

.ll-subscribe__input {
    flex: 1 0 0;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 16px;
    color: var(--ll-black);
}

/* Same rule as the hero fields: lighter than the value, and grey rather than
 * the near-black the input inherits. */
.ll-subscribe__input::placeholder {
    font-weight: 300;
    color: rgba(0, 0, 0, 0.45);
    opacity: 1;
}

.ll-subscribe__submit {
    flex-shrink: 0;
    width: 42.76px;
    height: 42.76px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ll-subscribe__submit img {
    display: block;
    width: 42.76px;
    height: 42.76px;
}

/*
 * In flight: the red arrow badge stays where it is and its arrow becomes a
 * spinner. The generic .ll-spinner is white-on-transparent — made for the red
 * buttons — so on the white pill it needs the badge's red behind it, or the
 * arrow just vanishes and nothing says the submit is under way.
 */
.ll-subscribe.is-busy .ll-subscribe__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ll-red);
    opacity: 1;
    cursor: progress;
}

.ll-subscribe.is-busy .ll-subscribe__submit .ll-spinner {
    width: 18px;
    height: 18px;
}

/*
 * Rejected format: the pill takes a red ring so the error is visible at the
 * field and not only in the line of text below it. Inset, so the pill keeps its
 * size and nothing in the footer column reflows.
 */
.ll-subscribe.has-error .ll-subscribe__field {
    box-shadow: inset 0 0 0 2px var(--ll-red),
        0 3.61px 27.11px rgba(0, 0, 0, 0.1);
}

/*
 * Honeypot. Pushed off-screen rather than display:none, because some bots skip
 * fields they can tell are hidden; it is out of the tab order and out of the
 * accessibility tree via aria-hidden on its wrapper.
 */
.ll-subscribe__decoy {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * The result line. Reserves no space while empty, so the footer column is laid
 * out exactly as designed until there is something to report.
 */
.ll-subscribe__message {
    margin: 12px 0 0;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--ll-white);
}

.ll-subscribe__message:empty {
    display: none;
}

.ll-subscribe__message.is-success {
    color: #4ade80;
}

.ll-subscribe__message.is-error {
    color: var(--ll-red);
}

/* Bottom bar ------------------------------------------------------------ */

.ll-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 57px;
    border-top: 1px solid var(--ll-border);
}

.ll-footer__copyright {
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    color: var(--ll-white);
}

.ll-footer__copyright strong {
    font-weight: 700;
}

/*
 * The brand name links home. It was authored inheriting the copyright line's
 * white, which left the only link in the bar looking like plain text and going
 * red only once the pointer was already on it. It carries the brand red at rest
 * instead, so the link reads as one, and lightens on hover to acknowledge the
 * pointer.
 */
.ll-footer__copyright-link {
    color: var(--ll-red);
    font: inherit;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ll-footer__copyright-link:hover,
.ll-footer__copyright-link:focus-visible {
    color: #ff3b42;
    /* text-decoration: underline !important; */
}

.ll-footer__legal {
    display: flex;
    align-items: center;
    gap: 20.04px;
    flex-shrink: 0;
}

.ll-footer__legal-link {
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 37.41px;
    color: var(--ll-text);
}

.ll-footer__legal-link:hover {
    color: var(--ll-red);
}

.ll-footer__legal-divider {
    width: 1px;
    height: 26.72px;
    background-color: rgba(250, 250, 250, 0.4);
}

/* =========================================================================
   HOME — HERO
   ========================================================================= */

/*
 * Every section is positioned and isolated so painting follows document order.
 * The hero's artwork overflows its own box; without this a positioned earlier
 * section would paint over a later section's non-positioned content.
 */
.ll-hero,
.ll-browse,
.ll-featured,
.ll-trust,
.ll-features,
.ll-testimonials,
.ll-faq,
.ll-download,
.ll-footer {
    position: relative;
    isolation: isolate;
}

/*
 * Fixed 1080px floor for the band the conveyor travels through. Below
 * HERO_CLEAR_WIDTH the script sets an explicit height instead, since there the
 * arc is offset below the copy rather than scaled with the viewport — see
 * initHeroOrbit() in js/local-locker.js.
 */
.ll-hero {
    min-height: 1080px;
}

/*
 * Figma flattens this export onto the frame's fill, so the baked #0D0D0D
 * backdrop was removed from the asset and real alpha recovered — it composites
 * normally beneath the moving products.
 */
.ll-hero__rays {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
}

.ll-hero__rays img {
    display: block;
    width: 100%;
    height: auto;
}

/* Curved product conveyor -------------------------------------------------
 * Positions are driven by js/local-locker.js from the Figma station geometry.
 * Clipping to the hero mirrors the way the Figma page frame crops the arc, and
 * keeps the off-canvas entry/exit stations from widening the page.
 */
.ll-hero__orbit {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

/*
 * Each product is a clip box holding an image that is scaled and offset inside
 * it — the same two-level arrangement Figma uses. Both are sized by JS from the
 * design geometry.
 */
.ll-hero__item {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    will-change: transform, opacity;
}

.ll-hero__item img {
    position: absolute;
    display: block;
    max-width: none;
}

/*
 * Red light behind the centre product. Sits above the rays but below the
 * products, and its opacity is driven by scroll position (--ll-hero-spot).
 */
.ll-hero__spotlight {
    position: absolute;
    top: 72.5%;
    left: 50%;
    width: 57.3%;
    aspect-ratio: 1100 / 520;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-image: radial-gradient(closest-side,
            rgba(237, 28, 36, 0.55) 0%,
            rgba(237, 28, 36, 0.22) 45%,
            rgba(237, 28, 36, 0) 100%);
    opacity: var(--ll-hero-spot, 0);
    pointer-events: none;
    z-index: 2;
}

/* Figma exports the rays already cropped to the 1920px page frame, from x=0. */
.ll-hero__rays {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.ll-hero__inner {
    position: relative;
    z-index: 4;
    padding-top: 212px;
}

/*
 * The headline role, shared with the inner pages' .ll-page__title. It was the
 * Figma frame's 80px, which put the home page a size above every inner hero
 * and left less of the first view for the conveyor underneath.
 */
.ll-hero__title {
    max-width: 945px;
    margin: 0 auto;
    font-family: var(--ll-font);
    font-weight: 700;
    font-size: var(--ll-fs-title);
    line-height: 1.16;
    letter-spacing: -0.62px;
    text-transform: uppercase;
    text-align: center;
    color: var(--ll-white);
}

/*
 * The coloured phrase inside a heading.
 *
 * There were three of these — .ll-hero__title-accent here, .ll-page__accent in
 * css/inner-pages.css and an .ll-download__accent that was never written — and
 * all of them were the same one declaration. Three names for one rule is how
 * the third came to be missing: the home page does not load inner-pages.css, so
 * a heading there that reached for .ll-page__accent simply rendered black.
 *
 * .ll-accent is the one ll_heading_html() emits. The other two are kept beside
 * it so any markup that still names them keeps its colour.
 */
.ll-accent,
.ll-hero__title-accent,
.ll-page__accent {
    color: var(--ll-red);
}

/* The standfirst role, shared with the inner pages' .ll-page__lead. */
.ll-hero__subtitle {
    max-width: 1435px;
    margin: 20px auto 0;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: var(--ll-fs-lead);
    line-height: 1.5;
    letter-spacing: -0.2px;
    text-align: center;
    color: var(--ll-white);
    opacity: 0.7;
}

/* Hero search bar -------------------------------------------------------- */

.ll-search {
    display: flex;
    align-items: stretch;
    width: 1084px;
    max-width: 100%;
    height: 76.1px;
    margin: 52.99px auto 0;
    padding: 0 23.41px;
    background-color: rgba(20, 20, 22, 0.55);
    border: 1.171px solid rgba(255, 255, 255, 0.3);
    border-radius: 1169.54px;
    -webkit-backdrop-filter: blur(5.854px);
    backdrop-filter: blur(5.854px);
    /*
     * Was overflow:hidden, to keep the fields inside the pill's radius. Nothing
     * in the bar actually reaches the corners — the fields have no background of
     * their own — but the Location and Dates panels drop out of the bar, and
     * hidden clipped them away entirely. Visible, so the panels can escape.
     */
    overflow: visible;
}

.ll-search__field {
    position: relative;
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5.85px;
    padding: 15.22px 23.41px;
    border-right: 1.171px solid rgba(255, 255, 255, 0.18);
}

.ll-search__field:nth-child(3) {
    border-right: 0;
}

.ll-search__label {
    display: block;
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 14.05px;
    line-height: 1.2;
    color: var(--ll-white);
    opacity: 0.5;
    cursor: pointer;
}

.ll-search__input {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 18.73px;
    line-height: 1.2;
    color: var(--ll-white);
}

/*
 * Placeholders are set a weight below the value and dimmed, so an empty field
 * cannot be mistaken for a filled one. The base ::placeholder rule at the top of
 * this file inherits the input's own colour and full opacity, which is what made
 * the hero's three fields read as typed input.
 */
.ll-search__input::placeholder {
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    opacity: 1;
}

.ll-search__action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 142.83px;
    padding: 11.71px 0;
}

.ll-search__submit {
    width: 100%;
    height: auto;
    gap: 7.02px;
    padding: 12.88px 31.61px;
    font-size: 17.56px;
    background-color: var(--ll-red);
}

.ll-search__submit-icon {
    flex-shrink: 0;
    width: 15.14px;
    height: 15.14px;
}

/*
 * The empty-search complaint. Hidden by default via the `hidden` attribute;
 * js/local-locker.js shows it when the form submits with no criteria.
 */
.ll-search__error {
    margin: 12px 0 0;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--ll-red);
    text-align: center;
}

/* Hero search — Location list and Dates calendar ------------------------- */

/*
 * One shell for both panels. It hangs off the field it belongs to, and takes
 * the search bar's own material — near-black glass, hairline edge, blur — so
 * the two read as one control rather than a browser widget dropped on top.
 *
 * z-index sits above the hero's product conveyor (.ll-hero__orbit is 3, and
 * .ll-hero__inner — which contains this — is 4).
 */
.ll-picker {
    position: absolute;
    top: calc(100% + 12px);
    left: 8px;
    z-index: 20;
    margin: 0;
    padding: 8px;
    background-color: rgba(14, 14, 16, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    font-family: var(--ll-font);
    color: var(--ll-white);
}

.ll-picker[hidden] {
    display: none;
}

/* The dates panel is the wider of the two, so it is the one that can run off
 * the right edge of the bar — it is anchored to its field's right instead. */
.ll-search__field--dates .ll-picker {
    left: auto;
    right: 0;
}

/* Location list ---------------------------------------------------------- */

.ll-picker--list {
    width: calc(100% + 24px);
    min-width: 240px;
    max-height: 296px;
    overflow-y: auto;
    /*
     * The list scrolls itself; without this, a wheel or trackpad gesture over
     * it chains straight through to the page, which scrolls the document while
     * the list of locations stands still.
     */
    overscroll-behavior: contain;
    list-style: none;
    /* A thin rail, matching the map rail's scrollbar. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.ll-picker--list::-webkit-scrollbar {
    width: 6px;
}

.ll-picker--list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.25);
}

.ll-picker__option {
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ll-picker__option[hidden] {
    display: none;
}

/*
 * is-active is the keyboard highlight and :hover the pointer one; they look the
 * same on purpose, so arrowing and pointing feel like the same gesture.
 */
.ll-picker__option:hover,
.ll-picker__option.is-active {
    background-color: rgba(237, 28, 36, 0.18);
    color: var(--ll-white);
}

.ll-picker__option[aria-selected="true"] {
    color: var(--ll-red);
}

.ll-picker__empty {
    padding: 11px 14px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
}

.ll-picker__empty[hidden] {
    display: none;
}

/* Dates calendar --------------------------------------------------------- */

.ll-picker--calendar {
    width: max-content;
    max-width: min(560px, calc(100vw - 32px));
    padding: 14px;
}

.ll-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 10px;
}

.ll-picker__title {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--ll-white);
}

.ll-picker__nav {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    color: var(--ll-white);
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ll-picker__nav:hover {
    background-color: var(--ll-red);
    border-color: var(--ll-red);
}

.ll-picker__months {
    display: flex;
    gap: 22px;
}

.ll-cal__caption {
    padding-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.ll-cal__row {
    display: grid;
    grid-template-columns: repeat(7, 34px);
}

.ll-cal__dow {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.ll-cal__pad {
    height: 34px;
}

.ll-cal__day {
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--ll-font);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ll-cal__day:hover:not(:disabled) {
    background-color: rgba(237, 28, 36, 0.28);
    border-radius: 50%;
}

.ll-cal__day:disabled {
    color: rgba(255, 255, 255, 0.22);
    cursor: default;
}

/* Today is marked, quietly — it is a landmark, not a selection. */
.ll-cal__day.is-today {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    border-radius: 50%;
}

/*
 * The band between the two ends is square so consecutive days join up, and only
 * the ends are rounded — the usual range shape.
 */
.ll-cal__day.is-in-range {
    background-color: rgba(237, 28, 36, 0.16);
    border-radius: 0;
}

.ll-cal__day.is-selected {
    background-color: var(--ll-red);
    color: var(--ll-white);
    border-radius: 50%;
}

.ll-cal__day.is-start:not(.is-end) {
    border-radius: 50% 0 0 50%;
}

.ll-cal__day.is-end:not(.is-start) {
    border-radius: 0 50% 50% 0;
}

.ll-picker__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ll-picker__action {
    height: 34px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    background: transparent;
    font-family: var(--ll-font);
    font-size: 14px;
    color: var(--ll-white);
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ll-picker__action:hover {
    border-color: var(--ll-white);
}

.ll-picker__action--primary {
    background-color: var(--ll-red-btn);
    border-color: var(--ll-red-btn);
}

.ll-picker__action--primary:hover {
    background-color: #ff3b42;
    border-color: #ff3b42;
}

/* The Dates field is readonly, so it must still look like something to click. */
.ll-search__input--picker {
    cursor: pointer;
}

/* =========================================================================
   HOME — BROWSE BY CATEGORY
   ========================================================================= */

.ll-browse__head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ll-browse__head .ll-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.ll-browse__cta {
    flex-shrink: 0;
    width: 215px;
}

/* Category strip --------------------------------------------------------- */

/*
 * The strip is wrapped in .ll-container in the template, so its width and side
 * gutters are the heading's — nothing here needs to re-derive them.
 *
 * The height is a ratio rather than the Figma constant: at 1600px wide
 * 53.354% resolves to the designed 853.66px, and holding the ratio keeps the
 * background's framing put when the container narrows (a viewport below the
 * container width, or browser zoom-out with side padding in play).
 */

#browse-gear>.ll-container:nth-child(2) {
    max-width: 100%;
}

.ll-categories {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 750;
    margin-top: 50px;
    overflow: hidden;
}

/*
 * One background per category, stacked. Only the active layer is opaque; the
 * others sit behind it at zero opacity so switching is a cross-fade with no
 * request on hover.
 */
.ll-categories__bgs {
    position: absolute;
    inset: 0;
}

/*
 * Figma sizes this fill larger than the strip and offsets it (118.59% × 150.3%,
 * pulled left 9.315% and up 37.13%). Those percentages only frame the photo
 * correctly at the exact design width — at any other width, or under browser
 * zoom, the crop drifts out of alignment with the strip and leaks past its
 * edges. The layer is pinned to the strip instead and `cover` does the
 * cropping, which holds at every size.
 */
.ll-categories__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.ll-categories__bg.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

    .ll-categories__bg,
    .ll-category::after,
    .ll-category__icon {
        transition: none;
    }
}

.ll-categories__scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.ll-categories__list {
    position: absolute;
    inset: 0;
    display: flex;
    margin: 0;
    padding: 0;
}

.ll-category {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    list-style: none;
}

.ll-category::before,
.ll-category::after {
    content: '';
    position: absolute;
    inset: 0;
}

.ll-category::before {
    background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0) 59.335%, var(--ll-black) 100%);
}

/*
 * The red foot sits in its own layer rather than swapping the gradient on
 * ::before, so it can cross-fade with the background photo (background-image
 * itself is not animatable).
 */
.ll-category::after {
    background-image: linear-gradient(to bottom, rgba(36, 36, 36, 0) 59.335%, var(--ll-red-btn) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ll-category.is-active::after,
.ll-category:hover::after {
    opacity: 1;
}

.ll-category+.ll-category {
    border-left: 1px solid #A5A5A5;
}

.ll-category__link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    height: 100%;
    padding: 0 10px 27px;
    text-align: center;
}

.ll-category__icon {
    width: 53.5px;
    height: 53.5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ll-category.is-active .ll-category__icon,
.ll-category:hover .ll-category__icon {
    opacity: 1;
}

/* A tile name, at the size the inner pages' .ll-tile__name carries. */
.ll-category__label {
    font-family: var(--ll-font);
    font-weight: 700;
    font-size: var(--ll-fs-h3);
    line-height: 1.3;
    color: var(--ll-white);
    /*
     * Every label reads as heavily as the active one.
     *
     * All six are the same 700 weight and the same size — the active tile only
     * looked bolder because its label sits on the solid red foot of the strip
     * while the others sit on a photograph. This gives them all the same
     * footing: on red it changes almost nothing, over a busy photo it puts the
     * white back to full strength.
     */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* =========================================================================
   HOME — FEATURED PRODUCTS
   ========================================================================= */

.ll-featured {
    padding-top: 140px;
}

.ll-products {
    display: flex;
    gap: 20px;
    margin: 50px 0 0;
    padding: 0;
}

.ll-products__item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    list-style: none;
}

/*
 * Product card — the design system's listing card ("Items for Rent in <city>",
 * ui_kits/city-houston/listing.css `.pc`). Photo-led media with a bottom scrim
 * and a glass badge, a hairline shell instead of a border, the price rail with
 * the ID-verified mark, a footer rail for deposit + rating, and a full-width
 * outline CTA that fills red on hover.
 *
 * Values below are what the system's tokens resolve to: space 5/6/10/12/16/20,
 * radius-card 16, radius-pill 100, radius-full 999, border-card #232323,
 * text-secondary #8E8E93, ll-trust #4ADE80, blur-card 42px, and the 200ms
 * cubic-bezier(.4,0,.2,1) interactive transition (colour and shadow only —
 * this system never moves or scales on hover).
 */
.ll-product {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--ll-black);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px #232323;
    cursor: pointer;
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * The whole card is the link, so it must not take the global anchor hover red
 * on its text — but it does need to acknowledge the pointer. It had only the
 * colour reset, so hovering a card did nothing at all unless the pointer
 * happened to land on the CTA pill at the bottom.
 *
 * The feedback is the card's own hairline going brand red plus a red glow,
 * which is the same language the Trust cards use, and stays inside the design
 * system's rule for this component: colour and shadow only, never movement.
 */
.ll-product:hover,
.ll-product:focus-visible {
    color: inherit;
    background-color: #0a0a0a;
    box-shadow: inset 0 0 0 1px var(--ll-red),
        0 4px 40px rgba(237, 28, 36, 0.28);
}

/* Product media ---------------------------------------------------------- */

.ll-product__media {
    position: relative;
    flex: none;
    height: 300px;
}

.ll-product__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================================
   Broken photograph fallback
   The live feed can reference images a browser cannot render (a HEIC upload
   straight off a phone) or blobs that no longer exist. initImageFallbacks()
   in js/local-locker.js hides the failed <img> and marks its frame, which
   paints this placeholder instead of the browser's broken-image glyph.

   Deliberately a placeholder and not a stand-in photograph: the frame keeps
   the card's own geometry and says "no image", rather than showing a product
   that is not the one being listed. Same rule, same mark and the same drawing
   as .ll-img-missing in css/inner-pages.css, so a missing photo looks
   identical on every page of the site.
   ========================================================================= */

.ll-img-missing {
    position: relative;
    background-color: #111111;
}

.ll-img-missing::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    opacity: 0.45;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.5-3.5L11 18'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*
 * The other half of the same idea: a row the feed sent with no photograph at
 * all. ll_placeholder_image() resolves it to a transparent pixel — never to a
 * photograph of something else — and the mark is painted on the image itself,
 * so it keeps one size whatever the frame is (a 300px card, a 46px avatar) and
 * needs no JavaScript. The image still fills its frame, as the frame's own
 * rules size it; only the drawing on top of it is fixed.
 *
 * Keyed to the data URI that function returns; that is the theme's only GIF
 * data URI, so the prefix is enough to match it and nothing else.
 */
img[src^="data:image/gif;base64,"] {
    background-color: #111111;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.45'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.5-3.5L11 18'/%3E%3C/svg%3E");
    background-size: 28px 28px;
    background-repeat: no-repeat;
    background-position: center;
}

/*
 * The same pixel, while a HEIC is being decoded into it.
 *
 * A photograph waiting on libheif has the placeholder in its src like any
 * other, so the rule above was drawing "no photograph here" over a card whose
 * photograph was a second away — the one thing it must not say. This overrides
 * it for exactly as long as the decode takes: js/heic.js sets the attribute
 * when the image enters the queue and removes it once the decoded frame has
 * actually painted, or failed, at which point the mark above is right again.
 *
 * It must follow that rule: both selectors are one element and one attribute,
 * so they carry the same weight and this wins on order alone.
 *
 * The sheen is .ll-skel's, to the same gradient, duration and easing, because
 * it means the same thing there and a visitor should not have to learn two
 * loading states. It is a background rather than a pseudo-element: an <img>
 * that loads successfully — and the placeholder does load — draws no ::after.
 */
img[data-ll-heic-loading] {
    background-color: #111111;
    background-image: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 255, 255, 0) 80%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    /*
     * Left to right, as .ll-skel's sheen travels.
     *
     * The figures look backwards because a percentage in background-position is
     * a percentage of (box width - image width), and the image here is twice
     * the box: 200% puts the highlight off the left edge and -100% carries it
     * off the right. Going 200% -> -100% is what makes it sweep the same way
     * the card skeletons do.
     */
    background-position: 200% 0;
    animation: ll-heic-sheen 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ll-heic-sheen {
    to {
        background-position: -100% 0;
    }
}

/*
 * Still, for anyone who asked not to be moved. The frame stays a quiet panel
 * rather than an empty one, so it still reads as "something is coming here".
 */
@media (prefers-reduced-motion: reduce) {

    img[data-ll-heic-loading] {
        background-image: linear-gradient(100deg,
                rgba(255, 255, 255, 0.04),
                rgba(255, 255, 255, 0.04));
        animation: none;
    }
}

/* Bottom scrim — how this system makes photography legible against black. */
.ll-product__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    opacity: 0.55;
    pointer-events: none;
}

.ll-product__badge {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    background-color: rgba(0, 0, 0, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(42px);
    backdrop-filter: blur(42px);
    font-family: var(--ll-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ll-white);
    white-space: nowrap;
}

/* Product body ----------------------------------------------------------- */

.ll-product__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 16px;
}

/* Two lines, then it clips — every card in a row keeps the same height. */
.ll-product__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    color: var(--ll-white);
}

/* Reserves its own line so short and long titles still align down the row. */
.ll-product__place {
    display: block;
    min-height: 18.2px;
    margin-top: 6px;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #8e8e93;
}

/* Slack in a shorter card collects above the price rail. */
.ll-product__price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: auto 0 0;
    padding-top: 12px;
}

/*
 * The same line as the inner card's, kept the same way: the amount, the period
 * and the verification mark are one row and stay one row. See .ll-prod__price
 * in css/inner-pages.css.
 */
.ll-product__amount {
    font-family: var(--ll-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    white-space: nowrap;
    color: var(--ll-white);
}

.ll-product__period {
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #8e8e93;
}

.ll-product__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /*
     * flex-shrink: 0 as the inner card's mark already had. Without it this is
     * the item that gives way first — it is last in the row and the only one
     * with room to lose — and "ID verified" wraps under the shield.
     */
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
    font-family: var(--ll-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #4ade80;
}

.ll-product__shield {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* Deposit left, rating and rentals right, over the card's own hairline rule. */
.ll-product__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    box-shadow: inset 0 1px 0 0 #232323;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #8e8e93;
}

.ll-product__trust {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ll-product__star {
    color: var(--ll-red);
}

/*
 * Reads as a button but stays inside the card's own anchor, so it is a span,
 * not a nested link: the white ring fills with brand red on hover. Keyboard
 * focus lands on the card itself, so the card's :focus-visible lights it too.
 */
.ll-product__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: 50px;
    margin-top: 12px;
    padding: 0 20px;
    border-radius: 999px;
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ll-white);
    font-family: var(--ll-font);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: var(--ll-white);
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * The pill fills whenever the card is hovered, not only when the pointer is on
 * the pill itself: the card is one link, so hovering anywhere in it is hovering
 * the call to action.
 */
.ll-product:hover .ll-product__cta,
.ll-product__cta:hover,
.ll-product:focus-visible .ll-product__cta {
    background-color: var(--ll-red);
    box-shadow: none;
    color: var(--ll-white);
}

/* =========================================================================
   HOME — SEARCH RESULTS
   Where the hero's search bar lands (template-parts/home/search-results.php).

   The section IS the Featured Products row in every respect — the same card,
   the same grid, the same rhythm — with the result count for a title and a way
   back beside it. Every other section hides while it is open, so the home page
   reads as a result set exactly as Browse Gear's does.
   ========================================================================= */

.ll-hresults {
    padding-top: 140px;
}

.ll-hresults[hidden] {
    display: none;
}

/* The heading sits beside "Clear search", as the category head does. */
.ll-hresults__head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ll-hresults__head .ll-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.ll-hresults__clear {
    flex-shrink: 0;
}

/*
 * The count line.
 *
 * It is the section's title, but it arrives with the results rather than with
 * the head above it — so it cannot sit inside .ll-heading and take that
 * block's own 10px gap under the eyebrow. It takes it here instead, or it
 * would butt straight against "SEARCH RESULTS" with nothing between them.
 */
.ll-hresults__title {
    margin-top: 10px;
}

/*
 * Four across, wrapping.
 *
 * The featured row carries exactly four cards and never wraps, so its items
 * grow from a zero basis. A result set can be any size, and on a zero basis
 * eight cards would share one line at half a card's width each — hence a real
 * basis here, and the two steps below mirroring the featured row's own.
 */
.ll-hresults .ll-products {
    flex-wrap: wrap;
}

.ll-hresults .ll-products__item {
    flex: 0 1 calc(25% - 15px);
}

[data-ll-home-grid][hidden] {
    display: none;
}

/*
 * The empty state — Browse Gear's, drawn in the home page's own values.
 *
 * It follows the head directly: when a search matches nothing the count line
 * above is suppressed, because this panel opens with its own heading and then a
 * sentence beginning with the same words, and the page was saying "Nothing
 * matched that search" three times in three sizes. Hence the 50px here, which
 * is .ll-products' own top margin — whatever the answer is, it starts at the
 * same place.
 */
.ll-hresults__empty {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 50px;
    padding: 80px 24px;
    border-radius: 16px;
    background-color: #0B0B0B;
    box-shadow: inset 0 0 0 1px #232323;
    text-align: center;
    overflow: hidden;
}

.ll-hresults__empty[hidden] {
    display: none;
}

.ll-hresults__empty > * {
    position: relative;
}

.ll-hresults__glow {
    position: absolute;
    top: -120px;
    right: -100px;
    width: 460px;
    height: 300px;
    background: radial-gradient(ellipse closest-side,
            var(--ll-red) 0%, rgba(237, 28, 36, 0.38) 42%, rgba(237, 28, 36, 0) 100%);
    opacity: 0.22;
    pointer-events: none;
}

.ll-hresults__empty-title {
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 600;
    font-size: var(--ll-fs-h3);
    line-height: 1.25;
    color: var(--ll-white);
}

.ll-hresults__empty-text {
    margin: 0;
    max-width: 52ch;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: var(--ll-fs-body);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

.ll-hresults__empty .ll-btn {
    margin-top: 8px;
}

/*
 * The result set replaces the page's sections until the search is cleared. The
 * hero stays: it carries the bar the visitor searches again from.
 */
.ll-home.is-searching > section:not(.ll-hero):not(.ll-hresults) {
    display: none;
}

/*
 * And the tail the hidden sections took with them.
 *
 * Home sections carry top padding only — one number sets the gap between each
 * pair — so the space before the footer is not anybody's bottom padding. It is
 * the empty lower half of .ll-download, which is 987px tall around a phone
 * mockup that does not fill it; .ll-footer__inner's own 93.53px was dropped for
 * exactly that reason.
 *
 * Searching hides .ll-download, and with it that gap: the results — or the
 * skeleton, or the empty panel — ran straight into the footer logo with
 * nothing between them. So while it is searching this page ends the way the
 * inner pages end, which is what it has become: .ll-page carries the same
 * 120px (--ll-page-tail) for the same reason.
 */
.ll-home.is-searching {
    padding-bottom: 120px;
}


/* =========================================================================
   HOME — TRUST & SAFETY
   ========================================================================= */

.ll-trust {
    position: relative;
    padding-top: 180px;
}

/*
 * Red smoke behind the section. Figma's source is a stack of heavily blurred
 * ellipses that flatten to nothing on export, so it is rebuilt from gradients
 * matched to the reference render — the same treatment .ll-download::after gets.
 *
 * Four stops rather than one: a bloom behind the heading, an off-centre blob at
 * each page edge to break the symmetry a single ellipse would give, and a broad
 * wash underneath. The cards' own black fill masks the middle, which is what
 * leaves the haze reading only at the page edges and above the grid.
 *
 * Percentage sizes and positions, so it tracks the section at every breakpoint
 * with no per-query overrides.
 */
.ll-trust::after {
    content: '';
    /* position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(38% 20% at 50% 7%, rgba(237, 28, 36, 0.26) 0%, rgba(237, 28, 36, 0) 100%),
        radial-gradient(34% 34% at 3% 40%, rgba(237, 28, 36, 0.34) 0%, rgba(237, 28, 36, 0) 100%),
        radial-gradient(32% 30% at 97% 62%, rgba(237, 28, 36, 0.3) 0%, rgba(237, 28, 36, 0) 100%),
        radial-gradient(75% 55% at 50% 50%,
            rgba(237, 28, 36, 0.18) 0%,
            rgba(237, 28, 36, 0.08) 50%,
            rgba(237, 28, 36, 0) 100%); */
    position: absolute;
    /*
     * The design's own glow, to the pixel.
     *
     * Figma draws it as the "Light" component (instance 66:64) behind this
     * section: inside it, "Ellipse 82" is 2451.85 x 859.20 at 50% opacity under
     * a 174.633px blur. The blur is why nothing usable comes out of an export —
     * both the component and the ellipse export as empty SVGs — so it is rebuilt
     * here from the frame's measurements.
     *
     * The box is the section's width rather than the ellipse's 2451.85px: an
     * absolutely positioned box that wide adds to the document's scrollable
     * width (at 390px the page measured 1193px across and could be dragged
     * sideways — the "whole homepage shifts left" report). The gradient carries
     * the shape instead: 142.9% horizontally is the same 1372px radius the
     * ellipse has at the 1920px frame, so what a visitor sees is the same
     * ellipse, and it scales with the viewport from there.
     *
     * Vertically it is placed off the cards, which is what the frame aligns it
     * to: the ellipse begins 138px above them. The cards start
     * 180 (section padding) + 141 (heading) + 50 (grid margin) = 371px down, so
     * the glow begins at 233px.
     */
    inset-inline: 0;
    top: 233px;
    height: 859.2px;

    background: radial-gradient(142.9% 111.92% at 50% 50%, #EB1F27 0%, rgba(0, 0, 0, 0) 100%);
    filter: blur(174.633px);
    /*
     * Dark at rest: the glow is the hover state, twice asked for. The ellipse
     * itself is Figma's, unchanged — only when it lights is ours. Lit on all
     * four cards at once the section read as one red haze.
     */
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Hovering any card lights the section's ellipse behind the grid, so the glow
 * a visitor sees is the design's own shape rather than a second effect invented
 * for the hover. :has() is the only way up from the card to the section; where
 * it is unsupported the glow simply stays dark, which is the resting state the
 * brief asks for anyway.
 */
.ll-trust:has(.ll-trust-card:hover)::after,
.ll-trust:has(.ll-trust-card:focus-within)::after {
    opacity: 0.5;
}

.ll-trust__inner {
    position: relative;
    z-index: 1;
}

.ll-trust__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 50px 0 0;
    padding: 0;
}

.ll-trust__item {
    display: flex;
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    list-style: none;
}

.ll-trust-card {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    min-height: 395px;
    /*
     * Figma declares 70px vertical padding, but the frame's fixed 395px height
     * centres the 274px body at 60.5px. 59.5px + the 1px border reproduces that
     * while keeping the card exactly 395px tall.
     */
    padding: 59.5px 29px;
    background-color: var(--ll-black);
    border: 1px solid var(--ll-red);
    border-radius: 30px;
    /*
     * No glow at rest. The design carries one on every card
     * (drop-shadow 0 4px 65px rgba(237,28,36,0.2)), but four of them lit at
     * once made the section read as one red haze, so the glow is the hover
     * state's job — see .ll-trust-card:hover below, which lights the design's
     * own shadow rather than inventing another.
     */
    box-shadow: none;
    /*
     * Same interactive transition as the product card: 200ms on colour and
     * shadow only, and nothing that moves or scales — see the note above
     * .ll-product.
     */
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Hover/focus feedback. The card is not a link, so the cue is deliberately a
 * lift in the red glow and a brighter edge rather than anything that suggests a
 * click target: the glow goes from the resting 0.2 to 0.45 and gains a hairline
 * inner edge, which is the same red the badge ring already carries.
 *
 * :focus-within covers keyboard arrival once these cards carry links.
 */
.ll-trust-card:hover,
.ll-trust-card:focus-within {
    background-color: #0a0a0a;
    border-color: #ff3b42;
    /* The design's own glow, lit — 0.2 there, a touch stronger for a hover. */
    box-shadow: 0 4px 65px rgba(237, 28, 36, 0.35);
}

.ll-trust-card__badge {
    position: relative;
    flex-shrink: 0;
    width: 252.07px;
    height: 252.07px;
}

.ll-trust-card__glow-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ll-trust-card__badge-inner {
    position: absolute;
    top: 49.17px;
    left: 23.53px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20.73px;
    width: 205.01px;
    height: 153.73px;
}

/*
 * Driven from the height so each glyph keeps its own aspect: three icons are
 * square (119x119) but "Rent with Confidence" is 112x119.
 */
.ll-trust-card__icon {
    flex-shrink: 0;
    width: auto;
    height: 118.44px;
    max-width: 118.44px;
}

/*
 * The longer labels are wider than their 205px box in Figma (244px and 240px)
 * and stay on one line, overflowing evenly on both sides — hence nowrap rather
 * than a full-width block, which would wrap them.
 */
.ll-trust-card__label {
    margin: 0;
    max-width: none;
    white-space: nowrap;
    font-family: var(--ll-font);
    font-weight: 600;
    font-size: var(--ll-fs-meta);
    line-height: 1.2;
    text-align: center;
    color: var(--ll-red);
}

.ll-trust-card__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*
 * A card heading. Figma's 36px lands at 1400px and up (see css/responsive.css);
 * below that the shared --ll-fs-h3 step capped it at 24px and gave 20px on a
 * 1280 laptop, a size reported twice as too small to read in a 395px card. Its
 * own ramp instead, so the desktop range climbs to the frame's figure rather
 * than jumping to it — the phone and tablet floor is the 20px it already was.
 */
.ll-trust-card__title {
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 600;
    font-size: var(--ll-fs-h3);
    line-height: 1.25;
    color: var(--ll-white);
}

.ll-trust-card__text {
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: var(--ll-fs-body);
    line-height: 1.55;
    color: var(--ll-white);
}

/* =========================================================================
   HOME — POWERFUL FEATURES (tabbed slider)
   ========================================================================= */

.ll-features {
    padding-top: 160px;
}

.ll-features__slider {
    margin-top: 75px;
}

.ll-features__tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.ll-features__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background-color: #111111;
    font-family: var(--ll-font);
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    color: var(--ll-text);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.ll-features__tab.is-active {
    background-color: var(--ll-red);
    color: var(--ll-white);
}

/*
 * Full-bleed track, with clipping and alignment kept apart:
 *
 * - the viewport spans the page and is the only thing that clips, so slides
 *   bleed off both edges — the deck reads as continuous, with the previous
 *   slide's tail still visible in the left gutter once you are past the first;
 * - the track carries the left offset, so the active slide always lands on the
 *   container's left edge, under the heading. Slick translates the track by the
 *   active slide's offsetLeft, which is measured inside the track, so a margin
 *   here shifts every slide without disturbing that maths.
 *
 * The -11px keeps the slide's optical left edge where Figma puts it, matching
 * the offset the pre-Slick track carried as a negative margin. max() hands the
 * gutter back to --ll-container-pad once the container stops being the wider of
 * the two, i.e. at the narrow breakpoints.
 */
.ll-features__viewport {
    --ll-features-gap: 40px;
    margin-top: 60px;
    overflow: hidden;
}

/*
 * Pre-Slick (and no-JS) fallback: a plain row showing the first slide. No gap
 * here — the slides' own margin-right already spaces them, and the viewport
 * above clips the overflow.
 */
.ll-features__track:not(.slick-initialized) {
    display: flex;
}

.ll-features__track {
    margin: 0 0 0 max(var(--ll-container-pad), calc((100% - var(--ll-container)) / 2 - 11px));
    padding: 0;
}

/*
 * Slick's own overflow would clip the track at the gutter and swallow the
 * slides behind the active one. The viewport above already clips at the page
 * edges, which is the only clipping this slider wants.
 */
.ll-features__track .slick-list {
    overflow: visible;
}

/*
 * Slick reads outerWidth(true) in variableWidth mode, so the gap has to be the
 * slide's own margin — a flex gap on the track is invisible to that measurement
 * and the translate per slide would come out 40px short.
 */
.ll-feature {
    flex-shrink: 0;
    width: 1062.92px;
    margin-right: var(--ll-features-gap);
    list-style: none;
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

/*
 * Slick sets float and height on slides; the cards are fixed-height and the
 * track is a single row, so neither is wanted here.
 */
.ll-features__track .slick-slide {
    float: none;
    height: auto;
}

/*
 * A flex track lays the row out without depending on Slick's floats. Its
 * clearfix pseudo elements would become flex items, so they go.
 */
.ll-features__track .slick-track {
    display: flex;
}

.ll-features__track .slick-track::before,
.ll-features__track .slick-track::after {
    display: none;
}

.ll-feature.is-active {
    opacity: 1;
}

/*
 * Card size, spacing, layout and text sizes mirror the Lend Gear "How Lending
 * Works" step card (.ll-steps__card / css/inner-pages.css) exactly — same
 * aspect-ratio, same 4.5%/7%/33% shot placement, same 50%/4.5% copy column,
 * same pill/heading/body type sizes — so the two match up as one design
 * language. The phone mockup's own crop (object-fit: cover) and fade scrim
 * stay as they were; only their positioning is now proportional like the
 * reference's, rather than fixed to the old 1062.92px Figma frame.
 */
.ll-feature__card {
    position: relative;
    aspect-ratio: 960 / 400;
    border: 1px solid #606060;
    border-radius: 30px;
    box-shadow: 0 4.6px 57.46px rgba(76, 122, 254, 0.2);
    overflow: hidden;
}

.ll-feature.is-active .ll-feature__card {
    border-color: var(--ll-red);
}

/* Phone mockup ----------------------------------------------------------- */

.ll-feature__phone {
    position: absolute;
    left: 4.5%;
    top: 7%;
    /*
     * Narrower than the step card's own 33%: this mockup's frame ratio
     * (340.38/540.51) is taller/narrower than the step shot's (813/942), so
     * it needs less width to stay inside the card's height at this top
     * offset — a wider figure here pushes past the card's bottom edge the
     * same way the step shot once did (see .ll-steps__shot).
     */
    width: 24%;
    aspect-ratio: 340.38 / 540.51;
    overflow: hidden;
}

.ll-feature__phone img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: top;
}

/*
 * The scrim that sinks the bottom of the phone into the card.
 *
 * The reference gradient is authored upside down and rotated 180deg
 * (black at 0%, transparent by 45%, then flipped), which resolves to
 * transparent down to 55% of this band and black only at its foot. Written
 * the other way round — black by 55% — it covered the app screen from about
 * halfway down the phone, which is why the snippets read as dark and
 * illegible. Same band, the design's own stops.
 */
.ll-feature__fade {
    position: absolute;
    /*
     * Deeper than the reference's own band, measured off the Figma frame
     * (node 278:3752): there the app screen starts losing light around 58% of
     * the phone and the caption under the camera is already half sunk by 85%,
     * where a single transparent-to-black ramp over the last 30% left the
     * screen bright to its foot. Three stops instead, so the fall-off starts
     * earlier and carries most of its weight in the bottom fifth.
     */
    top: 30%;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.72) 80%,
        var(--ll-black) 100%);
}

/* Slide copy ------------------------------------------------------------- */

.ll-feature__content {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 4.5%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.ll-feature__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1px solid var(--ll-red);
    border-radius: 100px;
    font-family: var(--ll-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ll-red);
}

/* A card heading inside the slide, sized like the step card's own heading. */
.ll-feature__title {
    margin: 16px 0 12px;
    font-family: var(--ll-font);
    font-weight: 600;
    font-size: clamp(21px, 1.75vw, 30px);
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--ll-white);
}

.ll-feature__text {
    margin: 0;
    max-width: 40ch;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: var(--ll-fs-meta);
    line-height: 1.55;
    color: var(--ll-white);
}

/* =========================================================================
   HOME — TESTIMONIALS
   ========================================================================= */

/*
 * Figma frame 81:403 is a full-bleed #0E0E0E band, y 5683.7–6675.7 (992px tall):
 * 100px above the heading and 26px below the slide counter. The 156.7px gap that
 * precedes it is a margin so the band's background starts in the right place.
 */
.ll-testimonials {
    margin-top: 156.7px;
    padding-top: 100px;
    padding-bottom: 26px;
    background-color: #0E0E0E;
}

/*
 * Figma's 665px group insets its content: 22.48px above the quote block and
 * 71.5px below the slide counter.
 */
.ll-testimonials__slider {
    width: 1406px;
    max-width: 100%;
    margin: 60px auto 0;
    padding: 22.48px 0 71.5px;
}

/*
 * Each slide is the full width of the slider and centres the 1186px figure, so
 * the quote keeps its measure while Slick translates whole slider-widths.
 * Before Slick initialises only the first slide shows, which is also what a
 * no-JS visitor gets.
 */
.ll-testimonials__slide {
    width: 100%;
}

.ll-testimonials__track:not(.slick-initialized) .ll-testimonials__slide:not(:first-child) {
    display: none;
}

/*
 * .ll-testimonial__mark is a 250px glyph in a 66px line box, so its ink paints
 * well outside its own box — and Slick clips with overflow on .slick-list, which
 * would shave the top off it. The list takes the overhang as padding and hands
 * the same amount back as negative margin, so the glyph is whole and the
 * section's vertical rhythm is exactly what it was before the slider.
 */
.ll-testimonials__track .slick-list {
    margin-top: -120px;
    padding-top: 120px;
}

.ll-testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 1186px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

/*
 * Oversized decorative quote glyph. The short line-height reproduces the
 * trimmed text box from Figma: the glyph paints outside its box, which keeps
 * the 50px rhythm of the stack intact.
 */
.ll-testimonial__mark {
    display: block;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    /* Decorative, so it scales with the block rather than sitting at 250px. */
    font-size: clamp(72px, 8vw, 130px);
    transform: translateY(30px);
    line-height: 0.5;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ll-white);
    opacity: 0.3;
}

/* The red label over the quote — the section-heading role's smaller sibling. */
.ll-testimonial__eyebrow {
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 500;
    font-size: var(--ll-fs-h3);
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ll-red);
}

/* Long copy, so the .ll-page__lead role. */
.ll-testimonial__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: var(--ll-fs-lead);
    line-height: 1.5;
    color: var(--ll-white);
}

.ll-testimonial__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 284px;
}

.ll-testimonial__rule {
    display: block;
    width: 184px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.6);
}

.ll-testimonial__name {
    font-family: var(--ll-font-display);
    font-weight: 700;
    font-size: var(--ll-fs-h4);
    line-height: 1.35;
    color: var(--ll-white);
}

/* Slide counter + progress bars ------------------------------------------ */

.ll-testimonials__nav {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 14px;
    margin-top: 100px;
}

/* Trimmed text box: the 20px counter occupies a 14px tall block. */
.ll-testimonials__count {
    flex-shrink: 0;
    margin: 0;
    font-family: var(--ll-font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 14px;
    color: var(--ll-white);
}

.ll-testimonials__bars {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
}

.ll-testimonials__bar {
    list-style: none;
    flex: 1 1 306px;
    max-width: 306px;
}

/*
 * The bars are the slider's only visible control, so each one is a button. The
 * rule itself stays 1px as designed; the button is 14px tall — the nav's own
 * height — so there is something to actually hit, with the line centred in it.
 */
.ll-testimonials__bar-btn {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 14px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* The grey rule every bar rests at. */
.ll-testimonials__bar-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
}

/*
 * The white fill rides over that rule and is scaled from the left, so the bar
 * reads as the slide's progress. scaleX keeps it on the compositor — a width
 * animation over four bars would relayout the nav on every frame.
 *
 * The resting state pins the duration at 0s rather than leaving the transition
 * out: dropping the declaration mid-run does not cancel a running transition in
 * Chrome, so a bar interrupted part-way would keep creeping to white on the old
 * timing. A matching property at 0s ends it on the spot, which is what lets the
 * script snap a bar to grey before its run and lets a skipped bar land on white.
 */
.ll-testimonials__bar-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    margin-top: -0.5px;
    background-color: rgba(255, 255, 255, 0.85);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0s linear;
}

/*
 * The run itself: grey to white across the slide's own dwell time. The duration
 * comes from the script (TESTIMONIAL_CYCLE_MS) so the fill and the advance can
 * never drift apart; the fallback is that same number.
 */
.ll-testimonials__bar.is-filling .ll-testimonials__bar-btn::before {
    transform: scaleX(1);
    transition: transform var(--ll-bar-fill, 6000ms) linear;
}

/* Bars already played stay filled, with no run of their own. */
.ll-testimonials__bar.is-done .ll-testimonials__bar-btn::before {
    transform: scaleX(1);
}

.ll-testimonials__bar-btn:hover::after,
.ll-testimonials__bar-btn:focus-visible::after {
    background-color: rgba(255, 255, 255, 0.85);
}

/*
 * No self-advancing progress: the script leaves autoplay off, so the current
 * bar just reads as white the way it did before.
 */
@media (prefers-reduced-motion: reduce) {

    .ll-testimonials__bar.is-active .ll-testimonials__bar-btn::before {
        transform: scaleX(1);
        transition: none;
    }
}

/* =========================================================================
   HOME — FAQ
   ========================================================================= */

.ll-faq {
    padding-top: 160px;
}

.ll-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 1320px;
    max-width: 100%;
    margin: 60px auto 0;
    padding: 0;
}

.ll-faq__item {
    list-style: none;
    background-color: var(--ll-black);
    border: 1px solid #222222;
    border-radius: 8px;
    overflow: hidden;
}

.ll-faq__question {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    /*
     * Figma declares 30px vertical padding, but the row's fixed 60px height
     * resolves it to a centred single line. 58px + the 1px borders on the item
     * gives the designed 60px row.
     */
    min-height: 58px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    text-align: left;
}

button.ll-faq__question {
    cursor: pointer;
}

.ll-faq__question-text {
    flex: 1 0 0;
    min-width: 0;
    font-family: var(--ll-font);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.42;
    color: var(--ll-white);
}

.ll-faq__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 200px;
    background-color: var(--ll-red);
}

.ll-faq__toggle-icon {
    display: block;
    width: 10px;
    height: 10px;
}

/*
 * Open rows show a minus, not a rotated plus: the vertical stroke collapses to
 * nothing about its own centre and the horizontal one is left. Rotating the
 * whole glyph 45deg — what this did before — reads as a close cross instead,
 * which is not what the expanded state in the design shows.
 */
.ll-faq__toggle-bar--v {
    transform-origin: 50% 50%;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ll-faq__item.is-open .ll-faq__toggle-bar--v {
    opacity: 0;
    transform: scaleY(0);
}

/*
 * The panel slides: initFaq() sets max-height to the measured height and back
 * to zero, and border-box keeps the bottom padding inside that box so a closing
 * panel finishes flush instead of leaving 24px behind.
 *
 * Closing is the shorter, flatter run — the row is on its way out, so it should
 * not linger. Opening is longer and eases out hard, which is what keeps a tall
 * answer from arriving with a snap; it is the asymmetry, not the duration, that
 * makes the pair read as smooth.
 */
.ll-faq__answer {
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 20px 24px;
    opacity: 0;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 1, 1),
        opacity 0.18s ease;
}

.ll-faq__item.is-open .ll-faq__answer {
    opacity: 1;
    transition: max-height 0.46s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease 0.04s;
}

/*
 * The copy rides the slide up into place rather than being revealed by the
 * clipping edge alone, which is what the eye actually reads as movement. 6px,
 * on the same curve as the panel, so the two settle together.
 */
.ll-faq__answer p {
    transform: translateY(-6px);
    transition: transform 0.24s cubic-bezier(0.4, 0, 1, 1);
}

.ll-faq__item.is-open .ll-faq__answer p {
    transform: none;
    transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1);
}

/* No slide, no fade, no lift — initFaq() drops the max-height run to match. */
@media (prefers-reduced-motion: reduce) {

    .ll-faq__answer,
    .ll-faq__item.is-open .ll-faq__answer {
        opacity: 1;
        transition: none;
    }

    .ll-faq__answer p {
        transform: none;
        transition: none;
    }

    .ll-faq__toggle-bar--v {
        transition: none;
    }
}

/*
 * The answer is a step down from the 18px question and carries the muted white
 * of the reference, so the question stays the row's anchor when a row is open.
 * The measure is narrower than the row: in the reference the first line wraps
 * roughly 300px short of the row's inner edge, which only a set width does.
 */
.ll-faq__answer p {
    margin: 0;
    max-width: 980px;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--ll-white);
    opacity: 0.7;
}

/* Answers run to several paragraphs; only the gaps between them are needed. */
.ll-faq__answer p+p {
    margin-top: 16px;
}

/* "Withdraw Funds" and the like — emphasis inside an answer stays the same size. */
.ll-faq__answer strong {
    font-weight: 600;
}

/* =========================================================================
   HOME — DOWNLOAD THE APP
   ========================================================================= */

/*
 * Figma puts 827.08px between the top of the download group and the footer, on
 * top of the 160px gap that precedes the group.
 */
.ll-download {
    position: relative;
    min-height: 987.08px;
    padding-top: 160px;
    /* Clips the off-canvas light spill declared in ::after below. */
    overflow: hidden;
}

/*
 * Red light spill behind the phone mockups. Figma's source ellipse sits far off
 * the canvas and does not survive export, so it is rebuilt as a gradient matched
 * to the reference render: peak at the right page edge around y=7950, fading out
 * by y=7750 and y=8180.
 */
.ll-download::after {
    content: '';
    position: absolute;
    top: 340px;
    right: -950px;
    width: 1900px;
    height: 440px;
    border-radius: 50%;
    background-image: radial-gradient(closest-side,
            rgba(237, 28, 36, 0.42) 0%,
            rgba(237, 28, 36, 0.3) 50%,
            rgba(237, 28, 36, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.ll-download__inner {
    position: relative;
    z-index: 1;
}

.ll-download__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    width: 800px;
    max-width: 100%;
    padding-top: 104.8px;
}

.ll-download__eyebrow,
.ll-download__title,
.ll-download__text {
    width: 100%;
}

/* The same three roles as every other section: kicker, h2, lead. */
.ll-download__eyebrow {
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 600;
    font-size: var(--ll-fs-kicker);
    line-height: 1.2;
    letter-spacing: var(--ll-kicker-tracking);
    text-transform: uppercase;
    color: var(--ll-white);
    opacity: 0.5;
}

.ll-download__title {
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 600;
    font-size: var(--ll-fs-h2);
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--ll-white);
}

.ll-download__text {
    margin: 0;
    font-family: var(--ll-font);
    font-weight: 400;
    font-size: var(--ll-fs-lead);
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: var(--ll-white);
    opacity: 0.7;
}

.ll-download__stores {
    display: flex;
    align-items: center;
    gap: 17.5px;
}

.ll-store-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 207.25px;
    height: 64.2px;
    padding: 24px;
    background-color: var(--ll-white);
    border: 1px solid rgba(201, 201, 201, 0.3);
    border-radius: 12px;
}

.ll-store-badge img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 36.2px;
}

/* Phone mockups ---------------------------------------------------------- */

.ll-download__phones {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ll-download__phone {
    position: absolute;
    display: block;
}

/* Figma page x=1089 / x=1380, less the 160px container offset at 1920. */
.ll-download__phone--front {
    top: 0;
    left: 929px;
    width: 312.63px;
    height: 647.69px;
}

.ll-download__phone--back {
    top: 64.4px;
    left: 1220.1px;
    width: 302.25px;
    height: 622.32px;
}
/* =========================================================================
 * Async sections — skeletons, failure and the loading state on a form
 *
 * Every API-backed block on the site now arrives after the page does (see
 * inc/ajax.php). These are the three states that implies: the placeholder the
 * frame reserves, the message when a section cannot be fetched, and the busy
 * state on a form that is mid-submit.
 *
 * The skeleton reserves the SHAPE of what is coming, not a spinner in the
 * middle of an empty box: a grid of four cards that collapses to nothing and
 * then expands again moves every section below it twice.
 * ====================================================================== */

.ll-async {
    display: block;
}

/* A section whose data turned out to be empty leaves no gap behind it. */
.ll-async.is-empty > [data-ll-async-frame] {
    display: none;
}

/*
 * Where the frame must not exist as a box.
 *
 * The hero's fanned cards are a grid child, the marquee is positioned against
 * the hero, the map is a two-pane card and the count pills sit inside a line of
 * text. Wrapping any of those in a div would put a box between them and the
 * rule that positions them, so the wrapper and its frame are taken out of the
 * layout and the real element becomes the child again.
 */
.ll-async--inline,
.ll-async--stack,
.ll-async--map,
.ll-async--ticker,
.ll-async--inline > [data-ll-async-frame],
.ll-async--stack > [data-ll-async-frame],
.ll-async--map > [data-ll-async-frame],
.ll-async--ticker > [data-ll-async-frame] {
    display: contents;
}

.ll-async__meta {
    margin-top: 0;
}

/*
 * What a section says when it has nothing, and when it could not load at all.
 *
 * One rule for both: they occupy the same place and carry the same weight — a
 * quiet line where the grid would have been, rather than an error shouting at
 * somebody who has done nothing wrong.
 */
.ll-async__error,
.ll-async__empty {
    margin: 0;
    padding: 18px 0;
    color: var(--ll-divider);
    font-size: 15px;
}

.ll-async__error p,
.ll-async__empty p {
    margin: 0 0 0.6em;
}

.ll-async__error p:last-child,
.ll-async__empty p:last-child {
    margin-bottom: 0;
}

/* --- Skeletons --------------------------------------------------------- */

/*
 * A placeholder that reserves the SHAPE of what is coming, not a grey box.
 *
 * The first pass was a plain rectangle per card, which reserved the right
 * height and still read as "something is broken" — a page of grey slabs looks
 * like a failure, and when the real cards landed the layout visibly changed
 * character. These carry the card's own anatomy instead: a picture area, a
 * title line, a shorter meta line and a price row. Nothing moves when the data
 * arrives because the placeholder was already that shape.
 */

.ll-skel {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--ll-r-lg, 14px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/*
 * The sheen.
 *
 * A transform rather than an animated background-position: this runs for as
 * long as the slowest endpoint takes, and compositing it keeps that off the
 * main thread. The gradient is angled, so the highlight travels across a card
 * rather than wiping down it.
 */
.ll-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    animation: ll-skel-sheen 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
}

@keyframes ll-skel-sheen {
    to {
        transform: translateX(100%);
    }
}

/*
 * Each card starts its sheen a beat after the one before it, so the row reads
 * as one surface being lit across rather than six things flashing together.
 * Six steps is enough for the widest grid the site draws; beyond that the
 * pattern repeats, which nobody will read as a pattern.
 */
.ll-skel-grid .ll-skel:nth-child(2)::after { animation-delay: 0.08s; }
.ll-skel-grid .ll-skel:nth-child(3)::after { animation-delay: 0.16s; }
.ll-skel-grid .ll-skel:nth-child(4)::after { animation-delay: 0.24s; }
.ll-skel-grid .ll-skel:nth-child(5)::after { animation-delay: 0.32s; }
.ll-skel-grid .ll-skel:nth-child(6)::after { animation-delay: 0.40s; }

/*
 * The skeleton lays itself out rather than borrowing .ll-grid: that class lives
 * in css/inner-pages.css, which the home page does not load, and a placeholder
 * that stacks into a column on one page and a row on another is a worse guess
 * at the shape than no placeholder at all.
 */
.ll-skel-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* The card: a picture area with three lines of furniture under it. */
.ll-skel--card {
    aspect-ratio: 312 / 367;
    padding: 0;
    background: rgba(255, 255, 255, 0.03);
}

.ll-skel--card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 52%;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/*
 * The lines. Drawn as one repeating-gradient rather than three elements: the
 * skeleton is decoration and should not cost three nodes a card, and the
 * proportions are fixed by the design anyway.
 */
.ll-skel--card .ll-skel__lines,
.ll-skel--tile .ll-skel__lines {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 10px;
}

.ll-skel__line {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.ll-skel__line--title { width: 78%; height: 13px; }
.ll-skel__line--meta  { width: 52%; }
.ll-skel__line--price { width: 34%; height: 15px; }

.ll-skel--tile {
    aspect-ratio: 4 / 3;
}

.ll-skel--tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.03);
}

.ll-skel--pill {
    display: inline-block;
    width: 190px;
    height: 34px;
    border-radius: 999px;
    vertical-align: middle;
}

.ll-skel--ticker {
    width: 100%;
    height: 64px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

/*
 * What arrives, arrives gently.
 *
 * A skeleton replaced in one frame by a grid of photographs is a flash, and on
 * a slow connection it happens section by section down the page. The fade is
 * short enough not to feel like a delay and long enough to read as the same
 * surface resolving.
 */
.ll-async.is-loaded > [data-ll-async-frame] {
    animation: ll-async-in 0.28s ease-out both;
}

@keyframes ll-async-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/*
 * An inline frame must not be given a transform: it sits inside a line of text
 * and `display: contents` leaves it with no box to transform anyway.
 */
.ll-async--inline.is-loaded > [data-ll-async-frame] {
    animation: none;
}

/*
 * Nothing moves for a visitor who asked for that. The skeleton still reserves
 * the space — it is the motion that goes, not the placeholder.
 */
@media (prefers-reduced-motion: reduce) {
    .ll-skel::after {
        animation: none;
    }

    .ll-async.is-loaded > [data-ll-async-frame] {
        animation: none;
    }
}

/* --- Form loading state ------------------------------------------------- */

/*
 * The search's empty state after a request has been sent (hideNoResults() in
 * js/request-form.js). Its own rule because the three things it marks are
 * styled in two different sheets, and one of them — the count line — is a
 * plain <p> that nothing else would take down.
 */
[data-ll-no-results][hidden] {
    display: none;
}

/*
 * Off-screen honeypot — hidden from people, still submitted by bots.
 *
 * Here rather than in css/inner-pages.css, where it used to be. Two forms carry
 * one (template-parts/inner/form.php and the gear request form), and the
 * request form is on the home page now — which does not load that sheet, so
 * the decoy would have been a visible text input asking for a website.
 */
.ll-form__decoy {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * The spinner rides the submit button: it is the control that was pressed and
 * the one that has stopped accepting presses, so it is where the answer to
 * "did that work?" belongs.
 */
.ll-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--ll-white);
    border-radius: 50%;
    animation: ll-spin 0.7s linear infinite;
}

@keyframes ll-spin {
    to {
        transform: rotate(360deg);
    }
}

.is-busy .ll-spinner {
    display: inline-block;
}

/* The arrow steps aside for the spinner rather than sitting beside it. */
.is-busy .ll-btn__icon,
.is-busy .ll-btn svg:not(.ll-spinner) {
    display: none;
}

.is-busy .ll-btn,
.is-busy .ll-subscribe__submit {
    cursor: progress;
    opacity: 0.75;
}

/*
 * The whole form stops responding while a submit is in flight — not just the
 * button. A second change to a field mid-request would be silently discarded
 * when the answer lands, which is worse than not accepting it.
 */
.ll-form.is-busy .ll-input,
.ll-reqf.is-busy .ll-reqf__t {
    pointer-events: none;
}

.ll-subscribe.is-busy .ll-subscribe__submit img {
    display: none;
}

/* --- reCAPTCHA ---------------------------------------------------------- */

.ll-recaptcha {
    margin: 18px 0 0;
}

/*
 * The widget is a fixed 302x78 iframe that cannot be made responsive, so on a
 * narrow screen it is scaled down rather than allowed to overflow the card.
 */
@media (max-width: 400px) {
    .ll-recaptcha [data-ll-recaptcha-widget] {
        transform: scale(0.85);
        transform-origin: 0 0;
    }
}

.ll-recaptcha__error {
    margin: 6px 0 0;
    min-height: 0;
    color: var(--ll-red);
    font-size: 13px;
}

.ll-recaptcha__error:empty {
    display: none;
}