@media (min-width: 576px) {
    .app-shell .sm-d-block {
        display: block;
    }
}

/* max-width !important because cart.css sets `.container { max-width: 90%
   !important }` — 90% of the VIEWPORT, which overflowed the 1100px shell and
   dragged the footer out to the browser edge with it. */
.app-shell .container,
.app-shell .container-fluid {
    width: 100%;
    max-width: 100% !important;
    margin-inline: auto;
    padding-inline: var(--app-pad);
}

.app-shell .row,
.app-shell .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--app-pad) / -2);
}

/* .form-row is Bootstrap's tighter gutter variant, used by the signup fields. */
.app-shell .form-row {
    margin-inline: -5px;
}

.app-shell .form-row > [class*="col-"] {
    padding-inline: 5px;
}

.app-shell [class*="col-"] {
    position: relative;
    width: 100%;
    padding-inline: calc(var(--app-pad) / 2);
}

.app-shell .col-md-6,
.app-shell .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
}

.app-shell .col-md-12,
.app-shell .col-sm-12,
.app-shell .col-xs-12,
.app-shell .col-lg-12,
.app-shell .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 576px) {
    .app-shell .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .app-shell .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* The app frame is a phone-width column on small screens, so the two-column
   splits in the copied markup only make sense once there is room for them. */
@media (min-width: 768px) {
    .app-shell .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .app-shell .col-md-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .app-shell .col-md-8 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }
}

.app-shell .form-group {
    margin-bottom: 18px;
}

.app-shell .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--app-ink);
}

.app-shell .form-control,
.app-shell .form-group input[type="text"],
.app-shell .form-group input[type="tel"],
.app-shell .form-group input[type="email"],
.app-shell .form-group input[type="number"],
.app-shell .form-group input[type="password"],
.app-shell .form-group select,
.app-shell .form-group textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--app-ink);
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 10px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}

.app-shell .form-control:focus,
.app-shell .form-group input:focus,
.app-shell .form-group select:focus,
.app-shell .form-group textarea:focus {
    border-color: var(--app-theme);
    box-shadow: 0 0 0 3px var(--app-theme-soft);
}

.app-shell .form-control::placeholder {
    color: var(--app-muted);
}

/* Number inputs carry the OTP digits; the spinners would clip the single
   character and are never useful here. */
.app-shell input[type="number"]::-webkit-outer-spin-button,
.app-shell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.app-shell input[type="number"] {
    -moz-appearance: textfield;
}

.app-shell .site-btn,
.app-shell .btn {
    display: inline-block;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--app-theme);
    border: 1px solid var(--app-theme);
    border-radius: 10px;
    cursor: pointer;
    transition: filter .15s ease;
}

.app-shell .site-btn:hover,
.app-shell .btn:hover {
    filter: brightness(.94);
    color: #fff;
    text-decoration: none;
}

.app-shell .site-btn:disabled,
.app-shell .btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.app-shell .btn-secondary,
.app-shell .btn-outline {
    color: var(--app-theme);
    background: #fff;
}

.app-shell .btn-link {
    color: var(--app-theme);
    background: none;
    border-color: transparent;
}

.app-shell .w-100 {
    width: 100%;
}

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

.app-shell .text-right {
    text-align: right;
}

.app-shell .text-danger {
    color: #dc2626;
}

.app-shell .float-right {
    float: right;
}

.app-shell .float-none {
    float: none;
}

.app-shell .position-relative {
    position: relative;
}

.app-shell .position-static {
    position: static;
}

.app-shell .flex-column {
    flex-direction: column;
}

.app-shell .m-auto {
    margin: auto;
}

.app-shell .d-flex {
    display: flex;
}

.app-shell .align-items-center {
    align-items: center;
}

.app-shell .justify-content-between {
    justify-content: space-between;
}

.app-shell .justify-content-center {
    justify-content: center;
}

.app-shell .m-0 { margin: 0; }
.app-shell .mb-0 { margin-bottom: 0; }
.app-shell .mb-1 { margin-bottom: 6px; }
.app-shell .mb-2 { margin-bottom: 10px; }
.app-shell .mb-3 { margin-bottom: 16px; }
.app-shell .mb-4 { margin-bottom: 22px; }
.app-shell .mt-1 { margin-top: 6px; }
.app-shell .mt-2 { margin-top: 10px; }
.app-shell .mt-3 { margin-top: 16px; }
.app-shell .mt-4 { margin-top: 22px; }
.app-shell .mr-1 { margin-right: 6px; }
.app-shell .p-0 { padding: 0; }
.app-shell .pb-0 { padding-bottom: 0; }
.app-shell .py-4 { padding-block: 22px; }
.app-shell .px-5 { padding-inline: 28px; }
.app-shell .p-0-mobile { padding: 0; }

/* --- Links --------------------------------------------------------------- */
.app-shell .link {
    color: var(--app-theme);
    font-weight: 600;
    text-decoration: none;
}

.app-shell .link:hover {
    text-decoration: underline;
}

.app-shell .breadcrumb-section {
    padding: 14px 0 0;
    background: none !important;
}

/* The trail must line up with the page content below it. Every one of these
   resets matters: .container, .row and the Bootstrap column each carry their
   own horizontal padding or negative margin, and leaving any of them in place
   shifts the breadcrumb off the content's left edge. The single source of the
   inset is --app-pad on .container, which is the same value the product
   section's own container uses. */
.app-shell .breadcrumb-section .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--app-pad);
    margin-inline: 0;
}

.app-shell .breadcrumb-section .row {
    margin-inline: 0;
}

.app-shell .breadcrumb-section [class*="col-"] {
    padding-inline: 0;
    /* A Bootstrap column is flex-basis:0 unless told otherwise; col-lg-12 only
       gets its 100% from a >=992px media query that this sheet does not load,
       so the trail collapsed to its content width on smaller screens. */
    flex: 0 0 100%;
    max-width: 100%;
}

/* .breadcrumb__text is a plain wrapper — no inset of its own, or the trail
   would sit in from the content it labels. */
.app-shell .breadcrumb__text {
    padding: 0;
    margin: 0;
}

.app-shell .breadcrumb__option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--app-muted);
}

/* The house glyph is an inline SVG with a hardcoded #333 stroke; scaled down
   and tinted to the theme so it reads as part of the trail. */
.app-shell .breadcrumb__option svg {
    width: 15px;
    height: 15px;
    stroke: var(--app-theme);
    flex: 0 0 auto;
}

.app-shell .breadcrumb__option a {
    color: var(--app-theme);
    font-weight: 600;
    text-decoration: none;
}

.app-shell .breadcrumb__option a:hover {
    text-decoration: underline;
}

/* The last span is the current page — the separator span before it stays
   muted and lighter. */
.app-shell .breadcrumb__option > span {
    color: var(--app-muted);
}

.app-shell .breadcrumb__option > span:last-child {
    color: var(--app-ink);
    font-weight: 600;
    /* .text-truncate needs a bound to truncate against. */
    max-width: 100%;
}

/* --- Static pages (Pages::display) --------------------------------------
   Terms, Privacy and the other vendor-authored pages render through the shared
   templates/Pages/display.php, which was written for the desktop layouts and
   has no layout-1 styling of its own. Left alone its Bootstrap .row/.col pair
   pulled the body 8px left of the breadcrumb above it, so the heading and the
   trail that labels it did not share a left edge. These mirror the breadcrumb
   resets above so both read off the same --app-pad inset. */
.app-shell .wrap-static-content {
    padding: 4px 0 var(--app-page-bottom);
}

.app-shell .wrap-static-content .row {
    margin-inline: 0;
}

.app-shell .wrap-static-content [class*="col-"] {
    padding-inline: 0;
    /* col-lg-12 only gets its 100% from a >=992px query this sheet does not
       load, so without this the column collapsed to its content width. */
    flex: 0 0 100%;
    max-width: 100%;
}

/* The page body is vendor-authored HTML, so it arrives with whatever margins
   its editor produced — commonly a leading <p> or <h*> whose top margin opened
   a gap under the breadcrumb. Trimming the first and last child's outer margins
   keeps the block tight to the trail above and the footer below. */
.app-shell .wrap-static-content > .container > .row > [class*="col-"] > :first-child {
    margin-top: 0;
}

.app-shell .wrap-static-content > .container > .row > [class*="col-"] > :last-child {
    margin-bottom: 0;
}

/* Keep last: .site-btn also sets display, and equal specificity means the later
   rule wins. No !important — jQuery .show() writes an inline display. */
.app-shell .hide {
    display: none;
}

.app-shell .invisible {
    visibility: hidden;
}

/* Bootstrap 4's display helpers, used by the signup markup. */
.app-shell .d-none {
    display: none;
}

.app-shell .d-block {
    display: block;
}

/* .show keeps its !important: it exists to force an element visible against a
   .hide that may still be on it, so it has to outrank that rule. */
.app-shell .show {
    display: block !important;
}