@font-face {
  font-family: "Estedad";
  src: local("Estedad"), url("../fonts/Estedad-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Estedad", Tahoma, Arial, sans-serif !important;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

body {
  font-variation-settings: "wght" 440;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
.btn,
.main-nav a {
  font-family: "Estedad", Tahoma, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-variation-settings: "wght" 760;
  letter-spacing: -0.035em;
}

strong,
b,
.btn,
.main-nav a,
.management-sidebar nav a,
.m-btn {
  font-variation-settings: "wght" 680;
}

/* Floating, softly rounded site navigation */
.site-header {
  top: 12px;
  height: 76px;
  margin: 12px 18px 0;
  border: 1px solid rgba(211, 221, 230, .95);
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(7, 27, 51, .08);
}

.site-header .nav-shell {
  width: calc(100% - 40px);
  max-width: none;
}

/* Keep long page copy away from the left edge of its panel. */
.hero-copy,
.page-hero > .container > div:first-child,
.simple-hero > .container,
.product-info,
.story-copy,
.article-content > article,
.legal-content,
.section-head > div:first-child {
  padding-left: clamp(16px, 2vw, 32px);
}

@media (min-width: 861px) {
  .main-nav {
    transform: translateY(4px);
    margin-right: 18px;
  }
}

@media (max-width: 860px) {
  .site-header {
    top: 8px;
    height: 66px;
    margin: 8px 9px 0;
    border-radius: 18px;
  }

  .site-header .nav-shell {
    width: calc(100% - 24px);
  }

  .main-nav {
    inset: 84px 9px 9px;
    border: 1px solid #e1e8ee;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(7, 27, 51, .12);
  }
}

@media (max-width: 560px) {
  .hero-copy,
  .page-hero > .container > div:first-child,
  .simple-hero > .container,
  .product-info,
  .story-copy,
  .article-content > article,
  .legal-content,
  .section-head > div:first-child {
    padding-left: 14px;
  }
}

.management-nav-badge{font-style:normal;margin-right:auto;min-width:20px;height:20px;padding:0 6px;border-radius:20px;background:#3b86f5;color:#fff;font:800 10px/20px Arial;text-align:center}.live-chat-admin{height:calc(100vh - 190px);min-height:590px;display:grid;grid-template-columns:330px 1fr;background:#fff;border:1px solid #e0e8ef;border-radius:20px;overflow:hidden}.chat-admin-list{border-left:1px solid #e0e8ef;background:#f8fbfd;display:grid;grid-template-rows:70px 1fr;min-width:0}.chat-admin-list>header{display:flex;align-items:center;justify-content:space-between;padding:14px 17px;border-bottom:1px solid #e0e8ef}.chat-admin-list>header>div{display:flex;flex-direction:column}.chat-admin-list>header b{font-size:15px}.chat-admin-list>header small{font-size:10px;color:#8191a0}.chat-admin-list>header button{width:36px;height:36px;border:1px solid #dbe5ed;background:#fff;border-radius:10px;color:#52708b;display:grid;place-items:center}.chat-admin-list>header .icon{width:17px}.chat-admin-list>[data-conversation-list]{overflow:auto;padding:9px}.chat-conversation{width:100%;border:0;background:transparent;border-radius:13px;padding:11px;display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;text-align:right;color:#17334d}.chat-conversation:hover,.chat-conversation.active{background:#eaf3ff}.chat-conversation>span{width:40px;height:40px;border-radius:12px;background:#dcecff;color:#2874dc;display:grid;place-items:center;font-weight:900}.chat-conversation>div{min-width:0;display:flex;flex-direction:column}.chat-conversation b{font-size:12px}.chat-conversation small{font-size:9px;color:#778a9b;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chat-conversation em{font-style:normal;font-size:9px;color:#8a9aa8}.chat-conversation em.unread{min-width:20px;height:20px;padding:0 6px;border-radius:20px;background:#347df1;color:#fff;font:800 9px/20px Arial;text-align:center}.chat-admin-room{min-width:0;background:#f2f6fa}.chat-admin-empty{height:100%;display:grid;place-content:center;text-align:center;color:#8192a2}.chat-admin-empty>span{display:grid;place-items:center}.chat-admin-empty .icon{width:46px;height:46px;margin-bottom:12px}.chat-admin-empty h2{font-size:19px;margin:0}.chat-admin-empty p{font-size:11px}.chat-admin-room>[data-admin-active]{height:100%;display:grid;grid-template-rows:72px 1fr auto}.chat-admin-room>[data-admin-active][hidden]{display:none}.chat-contact-head{background:#fff;border-bottom:1px solid #e0e8ef;padding:11px 17px;display:flex;align-items:center;gap:11px}.chat-contact-avatar{width:42px;height:42px;border-radius:13px;background:#e5f0ff;color:#2f74da;display:grid;place-items:center;font-weight:900}.chat-contact-head>div:nth-child(2){display:flex;flex-direction:column;flex:1}.chat-contact-head b{font-size:13px}.chat-contact-head span{font-size:10px;color:#738697}.chat-admin-messages{overflow:auto;padding:22px;display:flex;flex-direction:column;gap:10px}.admin-chat-message{max-width:72%;padding:11px 13px;border-radius:15px 15px 5px 15px;background:#fff;border:1px solid #dfe7ef;align-self:flex-start;color:#17334d}.admin-chat-message.admin{align-self:flex-end;background:#176bdc;border-color:#176bdc;color:#fff;border-radius:15px 15px 15px 5px}.admin-chat-message p{margin:0;font-size:11px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.admin-chat-message small{display:block;margin-top:3px;font-size:8px;color:#8296a8;direction:ltr}.admin-chat-message.admin small{color:#c7ddfb}.chat-admin-send{background:#fff;border-top:1px solid #e0e8ef;padding:13px;display:grid;grid-template-columns:1fr auto;gap:9px;align-items:end}.chat-admin-send textarea{resize:none;border:1px solid #d8e3ec;border-radius:12px;padding:10px 12px;outline:none;font:inherit}.chat-admin-send textarea:focus{border-color:#5b9cec;box-shadow:0 0 0 4px rgba(52,125,241,.08)}.chat-admin-send small{grid-column:1/-1;color:#cf4050}
@media(max-width:900px){.live-chat-admin{grid-template-columns:270px 1fr}.chat-contact-head .m-badge{display:none}}
@media(max-width:680px){.live-chat-admin{height:auto;min-height:0;grid-template-columns:1fr}.chat-admin-list{height:280px;border-left:0;border-bottom:1px solid #e0e8ef}.chat-admin-room{height:590px}.chat-contact-head{padding:9px}.chat-admin-messages{padding:13px}.admin-chat-message{max-width:88%}.chat-admin-send{grid-template-columns:1fr}.chat-admin-send .m-btn{width:100%}}

.theme-toggle .sun-icon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

html[data-theme="dark"] body:not(.management-body) {
  background: #06172b;
  color: #edf5ff;
}

html[data-theme="dark"] body:not(.management-body) .site-header {
  background: rgba(8, 27, 49, .94);
  border-color: #27415d;
  box-shadow: 0 16px 45px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] body:not(.management-body) .brand b,
html[data-theme="dark"] body:not(.management-body) h1,
html[data-theme="dark"] body:not(.management-body) h2,
html[data-theme="dark"] body:not(.management-body) h3,
html[data-theme="dark"] body:not(.management-body) h4,
html[data-theme="dark"] body:not(.management-body) strong,
html[data-theme="dark"] body:not(.management-body) b {
  color: #f4f8ff;
}

html[data-theme="dark"] body:not(.management-body) .main-nav a {
  color: #b9c8d9;
}

html[data-theme="dark"] body:not(.management-body) .main-nav a:hover,
html[data-theme="dark"] body:not(.management-body) .main-nav a.active {
  background: #17314d;
  color: #fff;
}

html[data-theme="dark"] body:not(.management-body) .icon-btn,
html[data-theme="dark"] body:not(.management-body) .search-close {
  background: #102943;
  border-color: #2c4762;
  color: #dcecff;
}

html[data-theme="dark"] body:not(.management-body) .hero-card {
  background: linear-gradient(125deg, #0b2039 0%, #0a1d34 58%, #102b49 100%);
  border-color: #29445e;
  box-shadow: 0 25px 65px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] body:not(.management-body) .hero-copy > p,
html[data-theme="dark"] body:not(.management-body) .page-hero p,
html[data-theme="dark"] body:not(.management-body) .simple-hero p,
html[data-theme="dark"] body:not(.management-body) .service-card > p,
html[data-theme="dark"] body:not(.management-body) .category-card p,
html[data-theme="dark"] body:not(.management-body) .article-body p,
html[data-theme="dark"] body:not(.management-body) .product-lead,
html[data-theme="dark"] body:not(.management-body) .legal-content p,
html[data-theme="dark"] body:not(.management-body) .story-copy > p {
  color: #aebfd0;
}

html[data-theme="dark"] body:not(.management-body) .hero-slides img,
html[data-theme="dark"] body:not(.management-body) .hero-visual > img,
html[data-theme="dark"] body:not(.management-body) .article-cover img {
  filter: brightness(1.25) contrast(.88) saturate(.9);
  mix-blend-mode: normal;
}

html[data-theme="dark"] body:not(.management-body) .category-card,
html[data-theme="dark"] body:not(.management-body) .featured-shell,
html[data-theme="dark"] body:not(.management-body) .service-card,
html[data-theme="dark"] body:not(.management-body) .trust-card,
html[data-theme="dark"] body:not(.management-body) .article-card,
html[data-theme="dark"] body:not(.management-body) .filter-panel,
html[data-theme="dark"] body:not(.management-body) .shop-toolbar,
html[data-theme="dark"] body:not(.management-body) .sidebar-help,
html[data-theme="dark"] body:not(.management-body) .option-form,
html[data-theme="dark"] body:not(.management-body) .contact-form,
html[data-theme="dark"] body:not(.management-body) .accordion details,
html[data-theme="dark"] body:not(.management-body) .legal-content,
html[data-theme="dark"] body:not(.management-body) .cart-item,
html[data-theme="dark"] body:not(.management-body) .cart-summary,
html[data-theme="dark"] body:not(.management-body) .cart-empty,
html[data-theme="dark"] body:not(.management-body) .panel,
html[data-theme="dark"] body:not(.management-body) .dashboard-nav,
html[data-theme="dark"] body:not(.management-body) .welcome-card,
html[data-theme="dark"] body:not(.management-body) .account-stats > div,
html[data-theme="dark"] body:not(.management-body) .search-panel,
html[data-theme="dark"] body:not(.management-body) .search-results,
html[data-theme="dark"] body:not(.management-body) .values > div,
html[data-theme="dark"] body:not(.management-body) .contact-cards > div,
html[data-theme="dark"] body:not(.management-body) .product-trust > span,
html[data-theme="dark"] body:not(.management-body) .feature-list > div,
html[data-theme="dark"] body:not(.management-body) .step-icon,
html[data-theme="dark"] body:not(.management-body) .visual-chip,
html[data-theme="dark"] body:not(.management-body) .legal-page aside,
html[data-theme="dark"] body:not(.management-body) .article-callout,
html[data-theme="dark"] body:not(.management-body) .floating-card {
  background: #0b223b;
  border-color: #29445e;
  color: #edf5ff;
}

html[data-theme="dark"] body:not(.management-body) .values span,
html[data-theme="dark"] body:not(.management-body) .contact-cards p,
html[data-theme="dark"] body:not(.management-body) .product-trust small,
html[data-theme="dark"] body:not(.management-body) .floating-card small {
  color: #91a8bd;
}

/* The dark promotional artwork becomes a bright card in night mode. */
html[data-theme="dark"] body:not(.management-body) .feature-intro,
html[data-theme="dark"] body:not(.management-body) .category-card.primary,
html[data-theme="dark"] body:not(.management-body) .story-card.dark,
html[data-theme="dark"] body:not(.management-body) .delivery-box,
html[data-theme="dark"] body:not(.management-body) .product-main-icon {
  background: linear-gradient(145deg, #f8fbff, #dcecff);
  border-color: #c9ddf2;
  color: #0a2947;
}

html[data-theme="dark"] body:not(.management-body) .feature-intro h2,
html[data-theme="dark"] body:not(.management-body) .category-card.primary h3,
html[data-theme="dark"] body:not(.management-body) .story-card.dark h2,
html[data-theme="dark"] body:not(.management-body) .delivery-box h3 {
  color: #071b33;
}

html[data-theme="dark"] body:not(.management-body) .feature-intro p,
html[data-theme="dark"] body:not(.management-body) .category-card.primary p,
html[data-theme="dark"] body:not(.management-body) .story-card.dark p,
html[data-theme="dark"] body:not(.management-body) .delivery-box li,
html[data-theme="dark"] body:not(.management-body) .delivery-box p {
  color: #50677e;
}

html[data-theme="dark"] body:not(.management-body) .feature-intro .btn-white,
html[data-theme="dark"] body:not(.management-body) .category-card.primary .btn-white,
html[data-theme="dark"] body:not(.management-body) .story-card.dark .btn-white,
html[data-theme="dark"] body:not(.management-body) .delivery-box .btn-white {
  background: #0a2947;
  color: #fff;
}

html[data-theme="dark"] body:not(.management-body) .product-visual-panel,
html[data-theme="dark"] body:not(.management-body) .simple-hero,
html[data-theme="dark"] body:not(.management-body) .process-shell,
html[data-theme="dark"] body:not(.management-body) .numbers .container,
html[data-theme="dark"] body:not(.management-body) .price-box {
  background: #0d2742;
  border-color: #29445e;
}

html[data-theme="dark"] body:not(.management-body) .page-hero > .container {
  background: #0c2744;
  border: 1px solid #2a4a69;
}

html[data-theme="dark"] body:not(.management-body) input,
html[data-theme="dark"] body:not(.management-body) textarea,
html[data-theme="dark"] body:not(.management-body) select {
  background: #071c32;
  border-color: #304b65;
  color: #edf5ff;
}

html[data-theme="dark"] body:not(.management-body) .btn-soft,
html[data-theme="dark"] body:not(.management-body) .btn-ghost,
html[data-theme="dark"] body:not(.management-body) .filter-toggle,
html[data-theme="dark"] body:not(.management-body) .mag-filter button,
html[data-theme="dark"] body:not(.management-body) .faq-tabs button {
  background: #132d48;
  border-color: #34516d;
  color: #eff7ff;
}

html[data-theme="dark"] body:not(.management-body) .mag-filter button:hover,
html[data-theme="dark"] body:not(.management-body) .faq-tabs button:hover {
  background: #1a3a5b;
  border-color: #4b7094;
}

html[data-theme="dark"] body:not(.management-body) .mag-filter button.active,
html[data-theme="dark"] body:not(.management-body) .faq-tabs button.active {
  background: #3b86f5;
  border-color: #3b86f5;
  color: #fff;
}

html[data-theme="dark"] body:not(.management-body) .btn-primary {
  background: #3b86f5;
  color: #fff;
}

html[data-theme="dark"] body:not(.management-body) .breadcrumbs,
html[data-theme="dark"] body:not(.management-body) .service-meta span,
html[data-theme="dark"] body:not(.management-body) .mini-features li,
html[data-theme="dark"] body:not(.management-body) .article-meta,
html[data-theme="dark"] body:not(.management-body) small {
  color: #91a8bd;
}

html[data-theme="dark"] body:not(.management-body) .product-details {
  background: #081d34;
  border-color: #29445e;
}

@media (max-width: 860px) {
  html[data-theme="dark"] body:not(.management-body) .main-nav {
    background: #0b223b;
    border-color: #29445e;
  }
}

/* About-page metrics: compact cards with small colored icons. */
.numbers .container {
  background: transparent;
  padding: 0;
  gap: 14px;
}

.numbers .container > div {
  min-height: 132px;
  padding: 22px;
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  text-align: right;
  background: #fff;
  border: 1px solid #e0e8ef;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(7, 27, 51, .055);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.numbers .container > div:hover {
  transform: translateY(-4px);
  border-color: #c9d9e7;
  box-shadow: 0 18px 38px rgba(7, 27, 51, .09);
}

.numbers .number-icon {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.numbers .number-icon .icon {
  width: 22px;
  height: 22px;
}

.numbers .number-blue { background: #e9f3ff; color: #2f80ed; }
.numbers .number-violet { background: #f2edff; color: #7959d9; }
.numbers .number-green { background: #e8f8f1; color: #1ca474; }
.numbers .number-orange { background: #fff1e5; color: #df7b25; }

.numbers .container > div > b {
  align-self: end;
  font-size: 24px;
  line-height: 1.25;
  color: #0b3155;
}

.numbers .container > div > .number-label {
  align-self: start;
  font-size: 11px;
  color: #71818d;
}

html[data-theme="dark"] body:not(.management-body) .numbers .container {
  background: transparent;
}

html[data-theme="dark"] body:not(.management-body) .numbers .container > div {
  background: #0b223b;
  border-color: #29445e;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] body:not(.management-body) .numbers .container > div > b {
  color: #f4f8ff;
}

html[data-theme="dark"] body:not(.management-body) .numbers .container > div > .number-label {
  color: #91a8bd;
}

@media (max-width: 560px) {
  .numbers .container {
    gap: 10px;
  }

  .numbers .container > div {
    min-height: 116px;
    padding: 16px;
    grid-template-columns: 40px 1fr;
    column-gap: 10px;
  }

  .numbers .number-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .numbers .container > div > b {
    font-size: 19px;
  }
}
.chat-admin-empty[hidden] {
  display: none !important;
}

/* Shop filters: author display rules must never override the native hidden state. */
[data-service-card][hidden] {
  display: none !important;
}

.filter-panel label {
  border-radius: 11px;
  padding-inline: 10px;
  transition: background-color .2s ease, color .2s ease;
}

.filter-panel label:hover {
  background: #f3f7fb;
}

.filter-panel label.is-active {
  background: #eaf3ff;
  color: #145da9;
}

html[data-theme="dark"] body:not(.management-body) .filter-panel label:hover {
  background: #102b47;
}

html[data-theme="dark"] body:not(.management-body) .filter-panel label.is-active {
  background: #173a5d;
  color: #8ac2ff;
}

/* Authentication pages need their own dark surface.  The base auth layout
   intentionally uses a white form column, but the global dark-theme heading
   rules turn its text white.  Keep the two sides coherent in night mode. */
html[data-theme="dark"] body:not(.management-body) .auth-page {
  background: #06172b;
}

html[data-theme="dark"] body:not(.management-body) .auth-form-wrap {
  background: #0b223b;
  border-inline-start: 1px solid #29445e;
}

html[data-theme="dark"] body:not(.management-body) .auth-form > p {
  color: #aebfd0;
}

html[data-theme="dark"] body:not(.management-body) .auth-form label {
  color: #edf5ff;
}

html[data-theme="dark"] body:not(.management-body) .auth-form input::placeholder {
  color: #7f98b0;
  opacity: 1;
}

html[data-theme="dark"] body:not(.management-body) .auth-switch {
  color: #aebfd0;
}

html[data-theme="dark"] body:not(.management-body) .auth-switch a {
  color: #8ac2ff;
}

/* Mobile navigation: keep the drawer a single, scrollable layer above the
   page instead of letting its links flow into the hero content. */
@media (max-width: 860px) {
  body:not(.management-body) .site-header {
    z-index: 1000;
  }

  body:not(.management-body) .main-nav {
    position: fixed !important;
    top: 84px !important;
    right: 9px !important;
    bottom: auto !important;
    left: 9px !important;
    /* A fixed drawer with height:auto collapses to the flex content's
       intrinsic line height in some mobile browsers.  Give it an explicit
       viewport height so every link is inside the visible panel. */
    height: calc(100vh - 93px) !important;
    height: calc(100dvh - 93px) !important;
    max-height: calc(100dvh - 93px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1001;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(110%);
    transition: transform .25s ease, opacity .2s ease, visibility .2s ease;
  }

  body.menu-open:not(.management-body) .main-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) !important;
  }

  body:not(.management-body) .main-nav a {
    flex: 0 0 auto;
    width: 100%;
    padding: 13px 14px;
    text-align: right;
  }

  html[data-theme="dark"] body:not(.management-body) .main-nav {
    background: #0b223b;
    border-color: #29445e;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
  }
}