/* Default template: shared storefront parts drawn in this template's style (loaded by its head).

   Customer account and sign-in pages (assets/front/css/account.css): the theme's black buttons that
   turn the theme green on hover, the green of its active states and focused fields, light grey
   surfaces and fields, its 3px corners and its semibold headings. */
:root {
    --account-theme-accent: #4e7661;
    --account-theme-accent-dark: #3f5f4e;
    --account-theme-button: #000000;
    --account-theme-button-hover: #4e7661;
    --account-theme-soft: #f5f5f5;
    --account-theme-cream: #fafafa;
    --account-theme-line: #e6e6e6;
    --account-theme-ink: #000000;
    --account-theme-muted: #7e7e7e;
    --account-theme-heading-weight: 600;
    --account-theme-help: #f5f5f5;
    --account-theme-on-help: #000000;
    --account-theme-input: #f5f5f5;
    --account-theme-radius: 4px;
    --account-theme-radius-small: 3px;
    --account-theme-pill: 3px;
    --account-theme-strong: 700;
}

/* Header row below the desktop breakpoint (navbar.tpl, .d-xl-none). The cart total stays on one line and the
   icons keep their size: when the total is long, the logo (at most 140px wide) gives way. Phones get tighter
   icon gaps (mr-3 under sm in the markup) and an untracked total; below 360px only the bag with its count
   badge is left. */
.default-mobile-logo {
    min-width: 0;
    overflow-wrap: break-word;
}

.default-mobile-logo img {
    height: auto;
    margin: 18px 0;
    max-width: min(140px, 100%);
}

@media (max-width: 575.98px) {
    .main-header .default-mobile-cart-total {
        letter-spacing: 0;
    }
}

@media (max-width: 359.98px) {
    .main-header .default-mobile-cart-total {
        display: none;
    }
}