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

html {
    scroll-behavior: smooth;
}

body.uv2-body {
    margin: 0;
    font-family: var(--uv2-font);
    color: var(--uv2-text);
    background: var(--uv2-bg);
    line-height: 1.5;
}

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

.uv2-container {
    width: min(100% - 2rem, var(--uv2-container));
    margin-inline: auto;
}

.uv2-main {
    padding-top: var(--uv2-header-height);
    min-height: calc(100vh - var(--uv2-header-height));
}

.uv2-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--uv2-bg);
    border-bottom: 1px solid var(--uv2-border);
}

.uv2-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uv2-space-6);
    min-height: var(--uv2-header-height);
}

.uv2-header__left,
.uv2-header__right {
    display: flex;
    align-items: center;
    gap: var(--uv2-space-4);
}

.uv2-header__menu-btn {
    display: inline-flex;
}

.uv2-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--uv2-space-2);
    text-decoration: none;
    color: inherit;
}

.uv2-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--uv2-radius);
    background: #1f2937;
    color: #fff;
    font-weight: 700;
}

.uv2-brand__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}

.uv2-brand__name_footer {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
}

.uv2-nav {
    display: none;
    align-items: center;
    gap: 2.5rem;
}

.uv2-nav__link,
.uv2-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0.5rem 0;
    cursor: pointer;
    font-family: inherit;
}

.uv2-nav__link:hover,
.uv2-nav__link.is-active {
    color: #111827;
}

.uv2-nav__item--mega {
    position: relative;
}

.uv2-mega {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 0.5rem;
}

.uv2-mega__panel {
    width: min(57.5rem, calc(100vw - 2rem));
    background: #fff;
    border: 1px solid var(--uv2-border-strong);
    border-radius: var(--uv2-radius-lg);
    box-shadow: var(--uv2-shadow);
    padding: 2rem;
}

.uv2-mega__heading {
    margin: 0 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--uv2-text-muted);
}

.uv2-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 2rem;
}

.uv2-mega__link {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
}

.uv2-mega__link:hover {
    color: #111827;
    text-decoration: underline;
}

.uv2-mega--alagang .uv2-mega__panel {
    width: min(28rem, calc(100vw - 2rem));
}

.uv2-mega--rewards .uv2-mega__panel {
    width: min(22rem, calc(100vw - 2rem));
    padding: 0.75rem;
}

.uv2-mega--more .uv2-mega__panel {
    width: min(16rem, calc(100vw - 2rem));
    padding: 0.5rem 0;
}

.uv2-mega__more-stack {
    display: flex;
    flex-direction: column;
}

.uv2-mega__more-section {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--uv2-border-strong);
}

.uv2-mega__more-section--last {
    border-bottom: 0;
}

.uv2-mega__more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.uv2-mega__more-heading {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--uv2-text-muted);
}

.uv2-mega__more-link {
    display: block;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
}

.uv2-mega__more-link:hover {
    color: #374151;
    text-decoration: underline;
}

.uv2-icon-btn--cart {
    position: relative;
}

.uv2-cart-badge {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
}

.uv2-mega--shop .uv2-mega__panel {
    width: min(72rem, calc(100vw - 2rem));
    padding: 0;
    overflow: hidden;
}

.uv2-mega__panel--shop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 17.5rem;
    align-items: stretch;
}

.uv2-mega__shop-col {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 2rem;
    border-right: 1px solid var(--uv2-border-strong);
}

.uv2-mega__class-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.uv2-mega__class-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: #111827;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.uv2-mega__class-subtitle {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--uv2-text-muted);
}

.uv2-mega__class-list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.uv2-mega__class-link {
    display: block;
    padding: 0.4375rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
}

.uv2-mega__class-link:hover {
    color: #374151;
    text-decoration: underline;
}

.uv2-mega__class-all {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
    padding-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
}

.uv2-mega__class-all:hover {
    color: #374151;
}

.uv2-mega__class-all svg {
    color: #9ca3af;
}

.uv2-mega--shop .uv2-mega__sidebar {
    border-radius: 0;
    align-self: stretch;
}

.uv2-mega__panel--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    gap: 2rem;
    align-items: start;
}

.uv2-mega__subheading {
    margin: -0.75rem 0 1.25rem;
    font-size: 0.875rem;
    color: var(--uv2-text-muted);
}

.uv2-mega__class-group {
    margin-bottom: 1.5rem;
}

.uv2-mega__class-label {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111827;
}

.uv2-mega__class-sub {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    color: var(--uv2-text-muted);
    letter-spacing: 0.04em;
}

.uv2-mega__class-all-link {
    margin-top: 0.75rem;
    padding-top: 0;
    border-top: 0;
}

.uv2-mega__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--uv2-border-strong);
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
}

.uv2-mega__footer-link:hover {
    color: #374151;
}

.uv2-mega__sidebar {
    display: grid;
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--uv2-bg-muted);
    border-radius: var(--uv2-radius);
}

.uv2-mega__sidebar-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--uv2-text-muted);
}

.uv2-mega__product-list,
.uv2-mega__trend-list {
    display: grid;
    gap: 0.625rem;
}

.uv2-mega__product-card,
.uv2-mega__trend-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--uv2-radius);
    background: #fff;
    border: 1px solid var(--uv2-border-strong);
    text-decoration: none;
    color: inherit;
}

.uv2-mega__product-card:hover,
.uv2-mega__trend-link:hover {
    border-color: #d1d5db;
}

.uv2-mega__product-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--uv2-radius);
    background: #f3f4f6;
    font-size: 0.875rem;
    font-weight: 700;
    color: #6b7280;
    flex-shrink: 0;
}

.uv2-mega__product-copy {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.uv2-mega__product-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
}

.uv2-mega__product-meta {
    font-size: 0.75rem;
    color: var(--uv2-text-muted);
}

.uv2-mega__product-arrow {
    flex-shrink: 0;
    color: #9ca3af;
}

.uv2-mega__trend-link {
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
}

.uv2-mega__list {
    display: grid;
    gap: 0.75rem;
}

.uv2-mega__list--rewards {
    gap: 0.25rem;
}

.uv2-mega--rewards .uv2-mega__feature-link {
    padding: 0.875rem 0.75rem;
    border-radius: 0.75rem;
}

.uv2-mega--rewards .uv2-mega__feature-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    background: #f3f4f6;
}

.uv2-mega--rewards .uv2-mega__feature-title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
}

.uv2-mega--rewards .uv2-mega__feature-desc {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.uv2-mega__feature-link {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem;
    border-radius: var(--uv2-radius);
    text-decoration: none;
    color: inherit;
}

.uv2-mega__feature-link:hover {
    background: #f9fafb;
}

.uv2-mega__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--uv2-radius);
    background: #f3f4f6;
    color: #374151;
    flex-shrink: 0;
}

.uv2-mega__feature-icon img {
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
}

.uv2-mega__feature-icon-fallback {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.uv2-mega__feature-body {
    min-width: 0;
}

.uv2-mega__feature-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.uv2-mega__feature-desc {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--uv2-text-muted);
}

.uv2-dropdown--more .uv2-dropdown__panel {
    width: 16rem;
}

.uv2-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 0.5rem;
}

.uv2-dropdown__panel {
    width: 16rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: var(--uv2-radius);
    box-shadow: var(--uv2-shadow);
    padding: 1.5rem;
}

.uv2-dropdown__group + .uv2-dropdown__divider,
.uv2-dropdown__divider + .uv2-dropdown__group {
    margin-top: 0;
}

.uv2-dropdown__divider {
    height: 1px;
    margin: 1rem 0;
    background: var(--uv2-border-strong);
}

.uv2-dropdown__heading {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--uv2-text-muted);
}

.uv2-dropdown__link {
    display: block;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
}

.uv2-dropdown__link:hover {
    color: #111827;
}

.uv2-global-search--home {
    position: sticky;
    top: var(--uv2-header-height);
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--uv2-border-strong);
    padding: 0.75rem 0;
}

.uv2-global-search__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.uv2-search {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

.uv2-search--pill {
    border: 1px solid var(--uv2-border-strong);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.uv2-search__field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    padding: 0 0.875rem;
}

.uv2-search__icon {
    flex-shrink: 0;
    color: #9ca3af;
}

.uv2-search__input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
}

.uv2-search__input:focus {
    outline: none;
}

.uv2-search__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.125rem;
    border: 0;
    background: #111827;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.uv2-search--pill .uv2-search__btn {
    border-radius: 0 999px 999px 0;
}

.uv2-rx-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border: 1px solid var(--uv2-border-strong);
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.uv2-rx-btn:hover {
    background: #f9fafb;
    color: #111827;
}

.uv2-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: var(--uv2-radius);
    background: transparent;
    color: #374151;
    cursor: pointer;
}

a.uv2-icon-btn {
    text-decoration: none;
}

.uv2-icon-btn:hover {
    background: #f3f4f6;
}

.uv2-mobile-nav[hidden],
.uv2-mega[hidden] {
    display: none !important;
}

.uv2-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.uv2-mobile-nav__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.uv2-mobile-nav__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: min(22rem, 88vw);
    height: 100%;
    overflow: auto;
    background: #fff;
    padding: 1.25rem 1.5rem 2rem;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
}

.uv2-mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.uv2-mobile-nav__brand {
    min-width: 0;
}

.uv2-mobile-nav__primary {
    display: flex;
    flex-direction: column;
}

.uv2-mobile-nav__item {
    border-bottom: 1px solid var(--uv2-border);
}

.uv2-mobile-nav__trigger,
.uv2-mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 0;
    border: 0;
    background: transparent;
    color: #111827;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.uv2-mobile-nav__trigger span,
.uv2-mobile-nav__link {
    flex: 1;
}

.uv2-mobile-nav__chevron {
    flex-shrink: 0;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.uv2-mobile-nav__trigger.is-open .uv2-mobile-nav__chevron {
    transform: rotate(180deg);
}

.uv2-mobile-nav__sub {
    display: none;
    flex-direction: column;
    gap: 0.125rem;
    padding-bottom: 0.75rem;
}

.uv2-mobile-nav__sub.is-open {
    display: flex;
}

.uv2-mobile-nav__sublink {
    display: block;
    padding: 0.5rem 0 0.5rem 0.25rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
}

.uv2-mobile-nav__sublink:hover {
    color: #111827;
}
.uv2-mobile-nav__sublink--strong {
    font-weight: 600;
    color: var(--uv2-color-primary, #0f766e);
    margin-top: 0.25rem;
}

.uv2-mobile-nav__divider {
    height: 1px;
    margin: 1.5rem 0;
    background: var(--uv2-border);
}

.uv2-mobile-nav__secondary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.uv2-mobile-nav__group-title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--uv2-text-muted);
}

.uv2-mobile-nav__secondary-link {
    display: block;
    padding: 0.375rem 0;
    color: #374151;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
}

.uv2-mobile-nav__secondary-link:hover {
    color: #111827;
}

.uv2-mobile-nav__link {
    border-bottom: 1px solid var(--uv2-border);
}

.uv2-footer {
    background: var(--uv2-footer-bg);
    color: var(--uv2-footer-text);
    padding: var(--uv2-space-16) 0 var(--uv2-space-8);
}

.uv2-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uv2-space-8);
}

.uv2-footer__title {
    margin: 0 0 var(--uv2-space-4);
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.uv2-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.uv2-footer__links a {
    display: inline-block;
    padding: 0.25rem 0;
    color: var(--uv2-footer-text);
    text-decoration: none;
    font-size: 0.875rem;
}

.uv2-footer__links a:hover {
    color: var(--uv2-accent);
}

.uv2-footer__bottom {
    margin-top: var(--uv2-space-12);
    padding-top: var(--uv2-space-12);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: var(--uv2-space-6);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.uv2-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--uv2-space-3);
    text-decoration: none;
    color: #fff;
}

.uv2-footer__bottom-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uv2-space-4);
}

.uv2-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--uv2-space-6);
}

.uv2-footer__legal a {
    color: var(--uv2-footer-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.uv2-footer__legal a:hover {
    color: #9ca3af;
}

.uv2-footer__copy {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.uv2-footer__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.uv2-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #1f2937;
    color: var(--uv2-footer-text);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.uv2-footer__social-link:hover {
    background: #374151;
    color: #fff;
}

.uv2-footer__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.uv2-chat-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    box-shadow: var(--uv2-shadow);
    cursor: pointer;
}

@media (min-width: 768px) {
    .uv2-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .uv2-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .uv2-footer__bottom-meta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--uv2-space-6);
    }
}

@media (min-width: 1025px) {
    .uv2-header__menu-btn {
        display: none;
    }

    .uv2-nav {
        display: flex;
    }

    .uv2-footer__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .uv2-global-search--home .uv2-global-search__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .uv2-global-search--home .uv2-rx-btn {
        justify-content: center;
    }
}

/* Offline / chromeless storefront pages */
.uv2-body.uv2-body--chromeless {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at top, rgba(77, 166, 255, 0.12), transparent 42%),
        linear-gradient(180deg, var(--uv2-bg-muted) 0%, var(--uv2-bg) 100%);
}

.uv2-body--chromeless .uv2-main.uv2-main--chromeless {
    flex: 1;
    width: 100%;
    padding-top: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uv2-offline {
    width: min(100%, 32rem);
    margin-inline: auto;
    padding: var(--uv2-space-6) var(--uv2-space-4);
}

.uv2-offline__shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--uv2-space-6);
}

.uv2-offline__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uv2-space-2);
}

.uv2-offline__card {
    width: 100%;
    background-color: var(--uv2-bg);
    border: 1px solid var(--uv2-border-strong);
    border-radius: calc(var(--uv2-radius-lg) * 1.5);
    box-shadow: var(--uv2-shadow);
    padding: var(--uv2-space-8) var(--uv2-space-6);
    text-align: center;
}

.uv2-offline__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--uv2-space-6);
    border-radius: 999px;
    background: rgba(77, 166, 255, 0.12);
    color: var(--uv2-accent);
}

.uv2-offline__icon {
    display: block;
}

.uv2-offline__title {
    margin: 0 0 var(--uv2-space-3);
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--uv2-text);
}

.uv2-offline__text {
    margin: 0 auto var(--uv2-space-8);
    max-width: 22rem;
    color: var(--uv2-text-muted);
    line-height: 1.6;
}

.uv2-offline__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uv2-space-3);
    justify-content: center;
}

.uv2-offline__actions .uv2-btn {
    min-width: 9.5rem;
}

.uv2-offline__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--uv2-text-muted);
}

body.uv2-is-offline:not(.uv2-body--chromeless) {
    --uv2-offline-banner-height: 2.25rem;
}

body.uv2-is-offline:not(.uv2-body--chromeless)::before {
    content: "You are offline";
    position: fixed;
    top: var(--uv2-header-height);
    left: 0;
    right: 0;
    z-index: 45;
    background: #b42318;
    color: #fff;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    min-height: var(--uv2-offline-banner-height);
}

body.uv2-is-offline:not(.uv2-body--chromeless) .uv2-global-search--home {
    top: calc(var(--uv2-header-height) + var(--uv2-offline-banner-height));
    margin-top: var(--uv2-offline-banner-height);
}

body.uv2-is-offline:not(.uv2-body--chromeless).uv2-body--home .uv2-main {
    padding-top: calc(var(--uv2-header-height) + var(--uv2-offline-banner-height));
}

@media (max-width: 30rem) {
    .uv2-offline__actions {
        flex-direction: column;
    }

    .uv2-offline__actions .uv2-btn {
        width: 100%;
    }
}