/* USIN Midnight — a custom presentation layer over Tebex Exo. */
:root {
  --usin-accent: #83aff1;
  --usin-muted: #a0a6b1;
  --usin-border: #262a31;
  --color-bg: #101114;
  --color-brighter-bg: #17191e;
  --color-text: #f4f5f7;
  --color-text-secondary: #b7bdc7;
  --color-primary: #edf0f6;
  --color-primary-hover: #cfddf4;
  --color-primary-text: #15191f;
  --color-primary-text-hover: #15191f;
  --color-secondary: #24272e;
  --color-secondary-hover: #323843;
  --color-secondary-text: #f4f5f7;
  --content-inner-width: 1160px;
  --content-padding: 32px;
  --tebex-legal-footer-background-color: #101114;
  --tebex-legal-footer-border-color: #262a31;
  --tebex-legal-footer-text-color: #a0a6b1;
}
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body.usin-midnight { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
body.usin-midnight::before { content: none; }
body.usin-midnight .site { display: flex; flex-direction: column; gap: 0; min-height: calc(100vh - var(--tebex-footer-height)); font-size: 15px; }
.site > * { width: 100%; }
.site > .usin-page-content { flex: 1; }
.usin-wrap { width: min(100% - 64px, 1160px); margin-inline: auto; }
.usin-skip { position: fixed; top: 12px; left: 12px; padding: 12px 20px; background: #f4f5f7; color: #101114; z-index: 9999; transform: translateY(-200%); }
.usin-skip:focus { transform: none; }
.usin-midnight :focus-visible { outline: 2px solid var(--usin-accent); outline-offset: 5px; }
.usin-midnight button, .usin-midnight a, .usin-midnight summary { -webkit-tap-highlight-color: transparent; }
.usin-midnight a { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.usin-midnight a:hover { color: var(--usin-accent); }
.usin-header { max-width: none; padding: 0; border-bottom: 1px solid #ffffff09; }
.usin-header-inner { width: min(100% - 64px, 1160px); min-height: 92px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.usin-brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; color: #fff; font-size: 23px; font-weight: 750; line-height: 1.1; letter-spacing: -.7px; }
.usin-brand img { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.usin-brand small { display: block; margin-top: 5px; font-size: 8px; letter-spacing: 2px; font-weight: 600; color: var(--usin-muted); }
.usin-account { display: flex; gap: 22px; align-items: center; }
.usin-currency-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--usin-border); border-radius: 8px; background: #17191e; color: #d8e5fb; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.usin-currency-toggle:hover { border-color: var(--usin-accent); }
.usin-currencies { position: fixed; inset: 78px max(32px, calc((100vw - 1160px) / 2)) auto auto; margin: 0; width: 280px; max-width: calc(100vw - 40px); max-height: min(420px, 65vh); overflow: auto; padding: 20px; border: 1px solid #3a4250; border-radius: 12px; background: #17191e; color: #f4f5f7; scrollbar-width: thin; scrollbar-color: #536279 #17191e; }
.usin-currencies::backdrop { background: transparent; }
.usin-currencies h2 { margin: 0 0 16px; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.usin-currency-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.usin-currency-options a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 12px; border-radius: 6px; color: #b7bdc7; font-size: 14px; font-variant-numeric: tabular-nums; }
.usin-currency-options a:hover, .usin-currency-options a[aria-current] { background: #252f41; color: #d8e5fb; }
.usin-midnight ::selection { background: #83aff1; color: #101114; }
.usin-cart { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #bdc3ce; }
.usin-login { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: #bec4ce; font-size: 13px; max-width: 150px; overflow-wrap: anywhere; }
.usin-account .toggle-navigation { --btn-icon: url('https://template-assets.tebex.io/images/burger.svg'); display: none; }
@media (width > 960px) {
  .usin-header .site-navigation { margin: 0; width: auto; flex: 1; }
  .usin-header .navigation-horizontal > ul { display: flex; justify-content: center; gap: 28px; padding: 0; background: transparent; }
  .usin-header .navigation-horizontal > ul > li { flex: none; }
  .usin-header .navigation-horizontal .menu > li > a { padding: 8px 0; font-size: 14px; font-weight: 500; color: #9ca3b0; background: none; }
  .usin-header .navigation-horizontal .menu > li > a:hover, .usin-header .navigation-horizontal .menu > li.active > a { color: #f4f5f7; background: none; }
  .usin-header .navigation-horizontal .menu > li.active > a::after { content: ''; display: block; width: 14px; height: 2px; margin: 4px auto -6px; background: var(--usin-accent); }
}
.usin-header .site-sale-banner { max-width: none; margin: 0; padding: 12px 24px; font-size: 14px; border-radius: 0; }
.usin-home { background: radial-gradient(ellipse 620px 540px at 82% 9%, #233e692d, transparent 85%); }
.usin-hero { display: grid; grid-template-columns: .9fr 1.12fr; align-items: center; gap: 60px; padding-block: 56px; }
.usin-eyebrow { display: flex; gap: 9px; align-items: center; font-family: "SFMono-Regular", Consolas, monospace; color: var(--usin-muted); font-size: 10px; font-weight: 500; letter-spacing: 1.7px; line-height: 1.5; text-transform: uppercase; }
.usin-hero h1 { margin: 22px 0; font-size: clamp(40px, 4.1vw, 59px); letter-spacing: -2.5px; line-height: 1.09; font-weight: 730; }
.usin-hero h1 span, .usin-support h2 span { color: var(--usin-accent); }
.usin-lead { max-width: 405px; font-size: 16px; color: var(--usin-muted); line-height: 1.9; }
.usin-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 31px; }
.usin-button { display: inline-flex; gap: 18px; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 650; }
.usin-button-primary { background: #edf0f6; color: #15191f; }
.usin-button-primary:hover { background: #cfddf4; color: #15191f !important; }
.usin-button-quiet { color: #c2c8d2; padding-inline: 10px; }
.usin-feature { min-width: 0; }
.usin-feature-caption { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; }
.usin-feature-label { font-size: 12px; color: #d7dce6; }
.usin-feature-label > span { color: var(--usin-accent); padding-left: 8px; }
.usin-feature-image { display: block; position: relative; border-radius: 10px; border: 1px solid #53627966; padding: 5px; background: #222832; box-shadow: 0 24px 65px #0006; }
.usin-feature-image img { width: 100%; height: auto; border-radius: 6px; }
.usin-feature-open { display: grid; place-items: center; position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; border-radius: 50%; background: #101114e6; color: white; border: 1px solid #ffffff30; font-size: 22px; transition: transform 160ms ease; }
.usin-feature-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 17px; font-size: 11px; color: #8892a2; }
.usin-feature-bottom a { color: #cbd6e9; white-space: nowrap; }
.usin-catalog-section { padding-block: 32px 56px; border-top: 1px solid var(--usin-border); }
.usin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.usin-section-heading .usin-eyebrow { margin-bottom: 12px; }
.usin-section-heading h1, .usin-section-heading h2 { font-size: clamp(28px, 3vw, 37px); font-weight: 650; letter-spacing: -1.1px; line-height: 1.2; }
.usin-section-heading > p { color: #929ba9; font-size: 12px; }
.usin-shelf + .usin-shelf { margin-top: 44px; }
.usin-shelf-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.usin-shelf-heading h3 { font-size: 15px; font-weight: 550; }
.usin-shelf-heading a, .usin-text-link { font-size: 12px; color: var(--usin-muted); }
.usin-home-grid, .usin-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.usin-product-card { padding: 0; background: #14161a !important; border: 1px solid var(--usin-border); border-radius: 10px; overflow: hidden; gap: 0; text-align: left !important; }
.usin-card-link { display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden; border-radius: 9px; background: #14161a; color: #fff; }
.usin-home-grid > .usin-card-link { border: 1px solid #34383e; }
.usin-card-link > .image { display: block; flex: none; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #202630; margin: 0; border-radius: 0; }
.usin-card-link:hover .product-title { color: var(--usin-accent); }
.usin-card-caption { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px; }
.usin-card-caption .product-title { color: #fff; font-size: 16px; line-height: 1.3; font-weight: 650; letter-spacing: -.3px; }
.usin-card-price { margin-top: auto; color: #d8e5fb; font-size: 13px; display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; }
.usin-billing-period { color: var(--color-text-secondary); font-size: 13px; font-weight: 400; }
.usin-card-price strong { font-size: 15px; font-weight: 600; }
.usin-card-price del { color: #b3b5bc; font-size: 11px; }
.usin-product-card .actions { padding: 14px; gap: 8px; margin-top: auto; }
.usin-product-card .actions .price { display: none; }
.usin-product-card .actions .btn-primary { --btn-size: 38px; font-size: 12px; background: #252f41; color: #dce7fc; }
.usin-product-card .actions .btn-primary:hover { background: #354967; }
.usin-product-card .countdown { padding: 10px 14px 0; color: var(--usin-accent); }
.usin-catalog-status { padding: 22px; border: 1px solid var(--usin-border); border-radius: 8px; color: var(--usin-muted); font-size: 13px; }
.usin-catalog-status a { color: var(--usin-accent); }
.usin-catalog-status[hidden] { display: none; }
.usin-support { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-block: 76px 90px; border-top: 1px solid var(--usin-border); }
.usin-support h2 { margin: 18px 0; font-size: 40px; line-height: 1.2; letter-spacing: -1.5px; }
.usin-support > div > p:not(.usin-eyebrow) { color: var(--usin-muted); font-size: 14px; line-height: 1.9; max-width: 400px; }
.usin-faq { padding-top: 7px; }
.usin-faq details { border-bottom: 1px solid var(--usin-border); }
.usin-faq summary { position: relative; cursor: pointer; padding: 21px 30px 21px 0; font-size: 14px; list-style: none; }
.usin-faq summary::-webkit-details-marker { display: none; }
.usin-faq summary::after { content: '+'; position: absolute; right: 1px; color: #899ab5; font-size: 19px; }
.usin-faq details[open] summary::after { content: '−'; }
.usin-faq details p { padding: 0 22px 22px 0; font-size: 13px; line-height: 1.8; color: var(--usin-muted); }
.usin-faq details a { color: var(--usin-accent); }
.usin-category { padding-top: 58px; padding-bottom: 56px; }
.usin-category > .store-products { min-width: 0; }
.usin-category .store-sidebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 58px; gap: 22px; }
.usin-midnight .site-content-widgets { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 48px; }
.usin-midnight .site-content-widgets > .store-sidebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.usin-midnight .widget { border: 1px solid var(--usin-border); border-radius: 10px; min-width: 0; }
.usin-midnight .store-sidebar > .widget { margin: 0; align-self: stretch; }
.usin-midnight .widget-title { font-size: 14px; text-align: left; }
.usin-midnight .widget-gift-card input { min-width: 0; }
.usin-midnight .btn-primary, .usin-midnight .btn-secondary, .usin-midnight .btn-tertiary { border-radius: 7px; }
.usin-midnight .btn-primary:hover, .usin-midnight .btn-secondary:hover { box-shadow: none; }
.usin-midnight .popup-content, .usin-midnight .store-product-full { border-radius: 12px; border: 1px solid var(--usin-border); background: #17191e; }
.usin-midnight .store-product-full .descr { line-height: 1.8; }
.usin-midnight .store-product-full .descr img { border-radius: 8px; }
.usin-midnight .store-product-full .product-title { font-size: 27px; line-height: 1.3; padding-right: 30px; }
.usin-midnight .store-product-full > .image { max-height: 450px; width: 100%; object-fit: contain; border-radius: 8px; }
.usin-midnight .popup-close { border-radius: 8px; }
.usin-midnight .popup-error .popup-content { width: min(100% - 40px, 480px); height: auto; padding: 64px 28px 28px; margin: auto; }
.usin-popup-error { display: grid; gap: 16px; }
.usin-popup-error h2 { font-size: 22px; }
.usin-popup-error p { color: var(--usin-muted); }
.usin-popup-error .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.usin-midnight .basket-popup-content { border-radius: 0; }
.usin-midnight .basket-popup-content:has(> h2) { padding: 60px 28px 28px; }
.usin-midnight .basket-item { border: 1px solid var(--usin-border); border-radius: 8px; }
.usin-midnight .store-text { background: #17191e; border-radius: 10px; margin-block: 35px; }
.usin-midnight .category-description { padding: 22px; margin-bottom: 30px; border: 1px solid var(--usin-border); }
.usin-footer { margin-top: auto; border-top: 1px solid var(--usin-border); background: #101114; }
.usin-footer .site-footer-inner { display: block; padding-block: 34px 25px; }
.usin-footer-top { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.usin-footer-top nav { display: flex; gap: 26px; flex-wrap: wrap; color: #9da6b6; font-size: 12px; }
.usin-footer-bottom { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.usin-footer .copyright { margin: 0; text-align: left; max-width: 620px; font-size: 10px; line-height: 1.8; color: #828b99; }
.usin-footer .we-accept { display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; flex-shrink: 0; }
.usin-footer .we-accept li { margin: 0; }
.usin-footer .we-accept img { width: 28px; height: 20px; object-fit: contain; opacity: .65; }
@media (width <= 1100px) {
  .usin-hero { gap: 35px; padding-block: 48px; }
  .usin-hero h1 { font-size: 46px; }
  .usin-support { gap: 60px; }
}
@media (width <= 960px) {
  :root { --content-padding: 24px; }
  .usin-wrap, .usin-header-inner { width: calc(100% - 48px); }
  .usin-header-inner { min-height: 78px; gap: 20px; }
  .usin-account { gap: 15px; }
  .usin-currencies { top: 68px; right: 24px; }
  .usin-account .toggle-navigation { display: block; }
  .usin-header .site-navigation { background: #101114; }
  .usin-hero { grid-template-columns: 1fr; gap: 32px; padding-block: 36px; max-width: 680px; }
  .usin-hero h1 { font-size: clamp(40px, 7vw, 60px); }
  .usin-hero-copy .usin-lead { max-width: 530px; }
  .usin-feature { max-width: 640px; }
  .usin-section-heading { align-items: start; }
  .usin-home-grid, .usin-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .usin-support { gap: 35px; }
  .usin-support h2 { font-size: 33px; }
  .usin-category .store-sidebar, .usin-midnight .site-content-widgets > .store-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width <= 600px) {
  :root { --content-padding: 20px; }
  .usin-wrap, .usin-header-inner { width: calc(100% - 40px); }
  .usin-brand { font-size: 21px; gap: 8px; }
  .usin-brand img { width: 32px; height: 32px; }
  .usin-brand small { font-size: 7px; letter-spacing: 1.4px; }
  .usin-account { gap: 9px; }
  .usin-currencies { right: 20px; }
  .usin-currency-toggle { padding-inline: 9px; gap: 5px; }
  .usin-login { font-size: 12px; }
  .usin-login { flex-shrink: 0; white-space: nowrap; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .usin-login > span { display: none; }
  .usin-cart { width: 32px; }
  .usin-hero { padding-block: 28px; gap: 28px; }
  .usin-hero h1 { font-size: 45px; letter-spacing: -1.8px; }
  .usin-lead { font-size: 14px; }
  .usin-hero-actions { gap: 5px; margin-top: 24px; }
  .usin-button { padding: 11px 16px; font-size: 12px; gap: 11px; }
  .usin-feature-bottom { font-size: 10px; gap: 10px; }
  .usin-catalog-section { padding-block: 28px 40px; }
  .usin-section-heading { flex-direction: column; gap: 12px; margin-bottom: 28px; }
  .usin-section-heading h1, .usin-section-heading h2 { font-size: 30px; }
  .usin-home-grid, .usin-products-grid { grid-template-columns: minmax(0, 1fr); }
  .usin-card-caption .product-title { font-size: 18px; }
  .usin-support { grid-template-columns: 1fr; padding-block: 44px 55px; gap: 30px; }
  .usin-category { padding-top: 35px; }
  .usin-category .store-sidebar, .usin-midnight .site-content-widgets > .store-sidebar { grid-template-columns: minmax(0, 1fr); }
  .usin-footer-top, .usin-footer-bottom { flex-direction: column; align-items: flex-start; gap: 22px; }
  .usin-footer-top nav { gap: 18px; }
  .usin-midnight .store-product-full .product-title { font-size: 22px; }
}
@media (width <= 480px) {
  .usin-header-inner { gap: 8px; }
  .usin-header .usin-brand small { display: none; }
  .usin-header .usin-brand img { width: 26px; height: 26px; }
  .usin-account { gap: 4px; }
  .usin-account .toggle-navigation { --btn-size: 36px; }
  .usin-header .usin-signed-in { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .usin-midnight *, .usin-midnight *::before, .usin-midnight *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Motion: short travel, fast feedback, and native interruptible transitions. */
:root { --usin-ease-out: cubic-bezier(.23, 1, .32, 1); }
@keyframes usin-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .usin-hero-copy > h1, .usin-hero-copy > .usin-lead, .usin-hero-copy > .usin-hero-actions, .usin-feature {
    animation: usin-arrive 480ms var(--usin-ease-out) backwards;
  }
  .usin-hero-copy > .usin-lead { animation-delay: 50ms; }
  .usin-hero-copy > .usin-hero-actions { animation-delay: 100ms; }
  .usin-feature { animation-delay: 150ms; }
  .usin-midnight :is(.usin-button, .usin-currency-toggle, .usin-cart, .btn-primary, .btn-secondary, .popup-close) {
    transition: transform 140ms var(--usin-ease-out), color 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }
  .usin-midnight :is(.usin-button, .usin-currency-toggle, .usin-cart, .btn-primary, .btn-secondary, .popup-close):active:not(:focus-visible) {
    transform: scale(.97);
  }
  .usin-home-grid > .usin-card-link, .usin-product-card, .usin-feature-image {
    transition: transform 240ms var(--usin-ease-out), opacity 240ms var(--usin-ease-out), border-color 160ms ease;
  }
  .usin-button > span, .usin-shelf-heading a > span, .usin-feature-open, .usin-currency-toggle svg {
    transition: transform 180ms var(--usin-ease-out);
  }
  .usin-account:has(.usin-currencies:popover-open) .usin-currency-toggle svg { transform: rotate(180deg); }
  .usin-currencies {
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    transition: opacity 140ms var(--usin-ease-out), transform 140ms var(--usin-ease-out), display 140ms allow-discrete, overlay 140ms allow-discrete;
  }
  .usin-currencies:popover-open {
    opacity: 1;
    transform: none;
    transition-duration: 200ms;
  }
  @starting-style {
    .usin-currencies:popover-open { opacity: 0; transform: translateY(-6px) scale(.97); }
    .usin-home-grid > .usin-card-link, .usin-product-card { opacity: 0; transform: translateY(10px); }
  }
  .usin-faq summary::after { content: '+'; transition: transform 180ms var(--usin-ease-out); }
  .usin-faq details[open] summary::after { transform: rotate(45deg); }
  .usin-faq details[open] > p { animation: usin-arrive 220ms var(--usin-ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .usin-home-grid > .usin-card-link:hover, .usin-product-card:hover { transform: translateY(-4px); border-color: #536b8b; }
  .usin-feature-image:hover { transform: translateY(-3px) rotate(-.35deg); }
  .usin-feature-image:hover .usin-feature-open { transform: translate(2px, -2px); }
  .usin-button:hover > span, .usin-shelf-heading a:hover > span { transform: translate(2px, -2px); }
  .usin-home-grid > .usin-card-link:active, .usin-product-card:has(.usin-card-link:active) { transform: translateY(-1px) scale(.99); }
}
/* Keyboard navigation is immediate, including native popup/menu animations. */
html:has(:focus-visible) { scroll-behavior: auto; }
.usin-midnight:has(:focus-visible) *, .usin-midnight:has(:focus-visible) *::before, .usin-midnight:has(:focus-visible) *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}