/* ==========================================================================
   NetShop app skin — shared chrome plus the cart, checkout, account,
   product and order-success screens.
   Design: docs/screens/*.jpeg
   ========================================================================== */

:root {
  --ns-green: #157a3d;
  --ns-green-dark: #0f5e2e;
  --ns-green-soft: #e8f5ec;
  --ns-red: #ef4444;
  --ns-ink: #111827;
  --ns-muted: #6b7280;
  --ns-line: #eceff3;
  --ns-bg: #fff;
  --ns-tabbar: 68px;
}

.ns-body--app {
  margin: 0;
  background: var(--ns-bg);
  color: var(--ns-ink);
  font-family: 'Noto Sans Bengali', -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: calc(var(--ns-tabbar) + env(safe-area-inset-bottom, 0px));
}
.ns-body--app * { box-sizing: border-box; }
.ns-body--app a { color: inherit; text-decoration: none; }
.ns-body--app img { max-width: 100%; height: auto; }

.ns-wrap--app { max-width: 780px; margin: 0 auto; padding: 8px 14px 24px; }

/* ------------------------------------------------------------------ header */
.ns-appbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 12px;
}
.ns-appbar__back {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  color: var(--ns-ink);
}
.ns-appbar__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ns-appbar__bag {
  width: 36px; height: 36px; border-radius: 10px; background: var(--ns-green);
  position: relative; flex: 0 0 auto;
}
.ns-appbar__bag::after {
  content: ''; position: absolute; inset: 7px; background: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7V6a5 5 0 0110 0v1h3l1 15H3L4 7h3zm2 0h6V6a3 3 0 00-6 0v1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7V6a5 5 0 0110 0v1h3l1 15H3L4 7h3zm2 0h6V6a3 3 0 00-6 0v1z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.ns-appbar__name { display: flex; flex-direction: column; min-width: 0; }
.ns-appbar__name strong { font-size: 21px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1; }
.ns-appbar__name strong em { font-style: normal; color: var(--ns-green); }
.ns-appbar__name small { font-size: 10.5px; color: var(--ns-muted); }
.ns-appbar__tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.ns-appbar__tool {
  position: relative; width: 40px; height: 40px;
  display: grid; place-items: center; color: var(--ns-ink);
}
.ns-count {
  position: absolute; top: 2px; right: 1px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ns-red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* --------------------------------------------------------------- tab bar */
.ns-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; background: #fff;
  border-top: 1px solid var(--ns-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ns-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 2px 8px; color: var(--ns-muted); font-size: 11.5px; font-weight: 600;
  position: relative;
}
.ns-tab .ns-ico { width: 23px; height: 23px; }
.ns-tab.is-active { color: var(--ns-green); }
.ns-tab .ns-count { top: 4px; right: calc(50% - 22px); }

/* ------------------------------------------------------- screen headings */
.ns-screen { min-height: 40vh; }
.ns-screen__head { display: flex; align-items: flex-end; gap: 10px; margin: 2px 0 14px; }
.ns-screen__head h1 {
  margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15;
}
.ns-screen__head p { margin: 2px 0 0; font-size: 13.5px; color: var(--ns-muted); }
.ns-screen__action { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--ns-green); font-weight: 700; font-size: 14px; }
.ns-screen__step { margin-left: auto; color: var(--ns-muted); font-size: 13.5px; }

.ns-card-box {
  border: 1px solid var(--ns-line); border-radius: 14px; padding: 14px;
  margin-bottom: 12px; background: #fff;
}
.ns-card-box__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ns-card-box__head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.ns-card-box__head .ns-ico { width: 21px; height: 21px; color: var(--ns-ink); }
.ns-card-box__link { margin-left: auto; color: var(--ns-green); font-weight: 700; font-size: 14px; }

/* --------------------------------------------------------------- buttons */
.ns-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 16px; border: 0; border-radius: 12px;
  background: var(--ns-green); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  text-align: center;
}
.ns-btn:hover, .ns-btn:focus { background: var(--ns-green-dark); color: #fff; }
.ns-btn--soft { background: var(--ns-green-soft); color: var(--ns-green); }
.ns-btn--soft:hover { background: #d9eee1; color: var(--ns-green-dark); }
.ns-btn--outline { background: #fff; color: var(--ns-green); border: 1px solid var(--ns-green); }
.ns-btn--outline:hover { background: var(--ns-green-soft); color: var(--ns-green-dark); }
.ns-btn--danger { background: #fff; color: var(--ns-red); border: 1px solid #f7c8c8; }
.ns-btn--danger:hover { background: #fef2f2; color: var(--ns-red); }
.ns-btn .ns-ico { width: 20px; height: 20px; }

/* ------------------------------------------------------------ quantity */
.ns-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ns-line); border-radius: 10px; overflow: hidden;
}
.ns-qty button {
  width: 38px; height: 38px; border: 0; background: #f7f8fa; color: var(--ns-ink);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.ns-qty input {
  width: 46px; height: 38px; border: 0; text-align: center;
  font: inherit; font-size: 15px; font-weight: 600; background: #fff;
  -moz-appearance: textfield;
}
.ns-qty input::-webkit-outer-spin-button,
.ns-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------------- cart */
.ns-cart-item {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--ns-line); border-radius: 14px; padding: 10px;
  margin-bottom: 12px;
}
.ns-cart-item__thumb {
  width: 96px; height: 96px; flex: 0 0 auto; border-radius: 10px;
  background: #f7f8fa; overflow: hidden; display: grid; place-items: center;
}
.ns-cart-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ns-cart-item__body { flex: 1 1 auto; min-width: 0; }
.ns-cart-item__title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.ns-cart-item__meta { font-size: 13px; color: var(--ns-muted); margin: 3px 0 6px; }
.ns-cart-item__price { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.ns-price-now, .ns-price-now .amount { color: var(--ns-green); font-size: 19px; font-weight: 800; }
.ns-price-was, .ns-price-was .amount { color: #9ca3af; font-size: 14px; font-weight: 500; text-decoration: line-through; }
.ns-cart-item__remove {
  border: 0; background: transparent; color: var(--ns-muted); cursor: pointer;
  width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto;
}
.ns-cart-item__remove:hover { color: var(--ns-red); }

.ns-coupon { display: flex; gap: 10px; margin: 4px 0 14px; }
.ns-coupon__field {
  flex: 1 1 auto; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--ns-line); border-radius: 12px; padding: 13px 14px;
  color: var(--ns-muted);
}
.ns-coupon__field input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; background: transparent; }
.ns-coupon button {
  flex: 0 0 auto; padding: 0 26px; border: 0; border-radius: 12px;
  background: var(--ns-green-soft); color: var(--ns-green);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}

.ns-totals { border: 1px solid var(--ns-line); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.ns-totals__row { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #374151; padding: 5px 0; }
.ns-totals__row span:last-child { margin-left: auto; font-weight: 600; color: var(--ns-ink); }
.ns-totals__row--total {
  border-top: 1px solid var(--ns-line); margin-top: 8px; padding-top: 12px;
  font-size: 19px; font-weight: 800;
}
.ns-totals__row--total span:last-child { color: var(--ns-green); font-size: 21px; font-weight: 800; }

/* ------------------------------------------------------------- checkout */
.ns-address { font-size: 15px; line-height: 1.55; color: #374151; }
.ns-address strong { display: block; font-size: 16px; color: var(--ns-ink); }
.ns-option {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--ns-line); border-radius: 12px; padding: 13px 14px;
  margin-bottom: 10px; cursor: pointer;
}
.ns-option:last-child { margin-bottom: 0; }
.ns-option.is-active { border-color: var(--ns-green); background: #f6fbf8; }
.ns-option input[type="radio"] { width: 20px; height: 20px; accent-color: var(--ns-green); margin: 0; flex: 0 0 auto; }
.ns-option__logo { width: 42px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; }
.ns-option__logo img { max-height: 30px; width: auto; }
.ns-option__text { min-width: 0; }
.ns-option__text strong { display: block; font-size: 16px; font-weight: 700; }
.ns-option__text small { font-size: 13px; color: var(--ns-muted); }
.ns-option__price { margin-left: auto; font-size: 16px; font-weight: 700; }

/* -------------------------------------------------------------- account */
.ns-profile {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--ns-green-soft); border-radius: 16px; padding: 16px;
  margin-bottom: 12px;
}
.ns-profile__avatar {
  width: 78px; height: 78px; border-radius: 50%; background: var(--ns-green);
  color: #fff; display: grid; place-items: center;
  font-size: 34px; font-weight: 800; flex: 0 0 auto; overflow: hidden;
}
.ns-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ns-profile__info { min-width: 0; }
.ns-profile__info strong { font-size: 19px; font-weight: 800; }
.ns-profile__info p { margin: 2px 0 0; font-size: 14px; color: #4b5563; }
.ns-profile__edit { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ns-green); font-weight: 700; font-size: 14px; }
.ns-profile__badge {
  margin-left: auto; background: #fff; border-radius: 12px; padding: 10px 14px;
  text-align: center; font-size: 14px; font-weight: 700;
}
.ns-profile__badge small { display: block; margin-top: 2px; color: var(--ns-green); font-size: 13px; font-weight: 600; }

.ns-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ns-stat {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--ns-line); border-radius: 14px; padding: 14px;
}
.ns-stat__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.ns-stat__icon--wallet { background: var(--ns-green); }
.ns-stat__icon--points { background: #f5b301; }
.ns-stat__text small { display: block; font-size: 13.5px; color: var(--ns-muted); }
.ns-stat__text strong { font-size: 19px; font-weight: 800; }
.ns-stat__go { margin-left: auto; color: #9ca3af; }

.ns-tiles {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  border: 1px solid var(--ns-line); border-radius: 14px; padding: 10px 6px;
  margin-bottom: 12px;
}
.ns-tile { text-align: center; font-size: 11px; color: #374151; position: relative; line-height: 1.25; }
.ns-tile__box {
  width: 40px; height: 40px; margin: 0 auto 5px; border-radius: 11px;
  background: #f7f8fa; display: grid; place-items: center; color: var(--ns-ink);
  position: relative;
}
.ns-tile__box .ns-ico { width: 20px; height: 20px; }
.ns-body--app .ns-btn--danger { padding: 12px 16px; font-size: 15px; }
.ns-tile .ns-count { top: -4px; right: -4px; }

.ns-menu { border: 1px solid var(--ns-line); border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
.ns-menu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--ns-line);
}
.ns-menu__item:last-child { border-bottom: 0; }
.ns-menu__item .ns-ico { width: 19px; height: 19px; color: #6b7280; flex: 0 0 auto; }
.ns-menu__text { min-width: 0; }
.ns-menu__text strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
/* One line per row: the description is a hint, not a paragraph. */
.ns-menu__text small {
  display: block; font-size: 12px; color: var(--ns-muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ns-menu__chev { margin-left: auto; width: 16px; height: 16px; color: #9ca3af; flex: 0 0 auto; }

/* -------------------------------------------------------- order success */
.ns-success { text-align: center; padding: 18px 0 4px; }
.ns-success__mark {
  width: 116px; height: 116px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--ns-green-soft); display: grid; place-items: center;
}
.ns-success__mark .ns-ico { width: 60px; height: 60px; color: var(--ns-green); }
.ns-success h1 { margin: 0 0 6px; font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
.ns-success p { margin: 0; font-size: 15.5px; color: var(--ns-muted); }
.ns-order-number {
  background: var(--ns-green-soft); border-radius: 14px; padding: 16px;
  text-align: center; margin: 18px 0 14px;
}
.ns-order-number small { font-size: 15px; color: #4b5563; }
.ns-order-number strong { display: block; margin: 4px 0 6px; font-size: 26px; font-weight: 800; color: var(--ns-green); }
.ns-order-number p { margin: 0; font-size: 14.5px; color: var(--ns-muted); }
.ns-detail-row { display: flex; align-items: flex-start; gap: 13px; padding: 9px 0; }
.ns-detail-row .ns-ico { width: 24px; height: 24px; color: #374151; flex: 0 0 auto; }
.ns-detail-row small { display: block; font-size: 14px; color: var(--ns-muted); }
.ns-detail-row strong { font-size: 15.5px; font-weight: 700; }
.ns-items-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ns-items-row figure { margin: 0; }
.ns-items-row .ns-thumb {
  aspect-ratio: 1 / 1; background: #f7f8fa; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; margin-bottom: 7px;
}
.ns-items-row .ns-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ns-items-row figcaption { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ns-items-row small { display: block; font-size: 12.5px; color: var(--ns-muted); margin: 2px 0; }
.ns-items-row b { color: var(--ns-green); font-size: 14.5px; }

.ns-actions { display: grid; gap: 12px; margin-top: 16px; }

/* The parent theme's chrome never shows on an app screen, whoever printed it. */
.ns-body--app .whb-header,
.ns-body--app .wd-page-title,
.ns-body--app .wd-footer,
.ns-body--app .wd-prefooter,
.ns-body--app .wd-close-side,
.ns-body--app .wd-side-hidden,
.ns-body--app .mobile-nav,
.ns-body--app .wd-sticky-nav,
.ns-body--app .click-shop-mobile-bottom-menu,
.ns-body--app .wd-toolbar,
.ns-body--app .wd-scroll-top,
.ns-body--app .wd-skip-links { display: none !important; }
.ns-body--app .wd-page-wrapper,
.ns-body--app .website-wrapper { display: block; padding: 0; margin: 0; }

/* Extras the theme adds to the checkout that the design does not have. */
.ns-body--app .woocommerce-form-coupon-toggle,
.ns-body--app .checkout_coupon,
.ns-body--app .wd-shipping-progress-bar,
.ns-body--app .wd-progress-bar,
.ns-body--app .woocommerce-shipping-progress-bar,
.ns-body--app .wd-free-progress-bar,
.ns-body--app .cross-sells,
.ns-body--app .wd-cross-sells,
.ns-body--app .ns-hidden-update { display: none !important; }

/* The sign-in and sign-up forms on the account screen. */
.ns-body--app .woocommerce-form-login,
.ns-body--app .woocommerce-form-register,
.ns-body--app .woocommerce-ResetPassword {
  border: 1px solid var(--ns-line); border-radius: 14px; padding: 16px; margin: 0 0 14px;
}
.ns-body--app .woocommerce-form-login label,
.ns-body--app .woocommerce-form-register label {
  display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; color: #374151;
}
.ns-body--app .woocommerce-form-login input[type="text"],
.ns-body--app .woocommerce-form-login input[type="password"],
.ns-body--app .woocommerce-form-register input[type="text"],
.ns-body--app .woocommerce-form-register input[type="email"],
.ns-body--app .woocommerce-form-register input[type="password"] {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--ns-line); border-radius: 10px; font: inherit; font-size: 15px;
}
.ns-body--app .woocommerce-form-login button,
.ns-body--app .woocommerce-form-register button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 16px; border: 0; border-radius: 12px;
  background: var(--ns-green); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ns-body--app .woocommerce-LostPassword { margin: 10px 0 0; font-size: 14px; }
.ns-body--app .woocommerce-form-login__rememberme { font-size: 14px; }

/* Our order-success cards already show all of this, so WooCommerce's own
   order-details tables below them stay hidden. */
.ns-body--app .woocommerce-order-details,
.ns-body--app .woocommerce-customer-details,
.ns-body--app .woocommerce-order-overview,
.ns-body--app .woocommerce-thankyou-order-details,
.ns-body--app .woocommerce-thankyou-order-received { display: none !important; }

/* The order-tracking plugin's own box, in the shop's colours. */
.ns-body--app .sot-box {
  max-width: none !important;
  margin: 0 0 14px !important;
  padding: 16px !important;
  border: 1px solid var(--ns-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.ns-body--app .sot-box h2 {
  font-size: 23px !important;
  font-weight: 800;
  text-align: left !important;
  margin: 0 0 14px !important;
  color: var(--ns-ink) !important;
}
.ns-body--app .sot-box input {
  height: 48px !important;
  border: 1px solid var(--ns-line) !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
  font-size: 15px !important;
}
.ns-body--app .sot-box button {
  height: 52px !important;
  background: var(--ns-green) !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700;
}

/* ------------------------------------------------------------- notices */
.ns-body--app .woocommerce-message,
.ns-body--app .woocommerce-info,
.ns-body--app .woocommerce-error {
  list-style: none; margin: 0 0 12px; padding: 13px 14px;
  border: 1px solid var(--ns-line); border-radius: 12px;
  background: var(--ns-green-soft); font-size: 14.5px;
}
.ns-body--app .woocommerce-error { background: #fef2f2; border-color: #f7c8c8; color: #b91c1c; }

@media (min-width: 768px) {
  .ns-wrap--app { padding: 16px 24px 30px; }
  .ns-items-row { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Home screen (docs/screens/01-home.jpeg)
   ========================================================================== */
.ns-body--app .ns-search {
  border: 0; background: #f4f5f7; border-radius: 11px;
  padding: 9px 12px; margin-bottom: 14px; gap: 9px;
}
.ns-body--app .ns-search .ns-ico { width: 17px; height: 17px; }
/* The theme gives inputs a tall min-height, so the height is set here. */
.ns-body--app .ns-search input[type="search"] {
  height: 24px;
  min-height: 0;
  padding: 0;
  line-height: 24px;
  font-size: 14.5px;
}
.ns-body--app .ns-search input[type="search"]::placeholder { font-size: 14.5px; }

.ns-hero {
  position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 18px;
}
.ns-hero__track { display: flex; transition: transform .35s ease; }
.ns-hero__slide {
  flex: 0 0 100%; display: flex; align-items: center; gap: 8px;
  min-height: 190px; padding: 20px;
  background: linear-gradient(135deg, #17864a 0%, #0f6b39 60%, #0c5a30 100%);
  color: #fff;
}
.ns-hero__text { flex: 1 1 58%; min-width: 0; }
.ns-hero__text span { display: block; font-size: 22px; font-weight: 600; line-height: 1.1; }
.ns-hero__text h2 {
  margin: 0 0 4px; font-size: 31px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1;
  color: #fff;
}
.ns-hero__text p { margin: 0 0 16px; font-size: 16px; color: rgba(255, 255, 255, .92); }
.ns-hero__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ns-green); border-radius: 999px;
  padding: 11px 20px; font-size: 15.5px; font-weight: 700;
}
.ns-body--app .ns-hero__btn:hover { background: #f1f7f3; color: var(--ns-green-dark); }
.ns-hero__media { flex: 0 0 40%; display: grid; place-items: center; align-self: stretch; }
.ns-hero__media img { max-height: 190px; width: auto; object-fit: contain; }
.ns-hero .ns-dots { bottom: 12px; }
.ns-body--app .ns-hero .ns-dot { background: rgba(255, 255, 255, .55); }
.ns-body--app .ns-hero .ns-dot.is-active { background: #fff; }

/* ---- Flash Deals ---- */
.ns-deals-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ns-deals-head h3 {
  display: flex; align-items: center; gap: 7px;
  margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.3px;
}
.ns-deals-head h3 .ns-ico { width: 22px; height: 22px; color: var(--ns-red); }
.ns-timer { display: flex; align-items: center; gap: 3px; }
.ns-timer b {
  background: var(--ns-red); color: #fff; border-radius: 6px;
  padding: 3px 7px; font-size: 14px; font-weight: 700; min-width: 30px; text-align: center;
}
.ns-timer i { color: var(--ns-red); font-style: normal; font-weight: 700; }
.ns-see-all {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  color: var(--ns-green); font-weight: 700; font-size: 14px; white-space: nowrap;
}

/* A horizontal rail of product cards, as on the home screen. */
.ns-rail {
  display: flex; gap: 12px; overflow-x: auto;
  padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ns-rail::-webkit-scrollbar { display: none; }
.ns-rail > .ns-card { flex: 0 0 172px; scroll-snap-align: start; }

.ns-card__was-row { margin-top: 2px; }

/* ---- Big Savings ---- */
.ns-savings {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  background: #fdf4e3; border-radius: 16px; padding: 18px;
  margin-bottom: 22px;
}
.ns-savings__text { flex: 1 1 56%; min-width: 150px; }
.ns-savings__text h3 { margin: 0 0 6px; font-size: 29px; font-weight: 800; color: #0f4d2a; letter-spacing: -.5px; }
.ns-savings__text p { margin: 0 0 14px; font-size: 15px; color: #3f4a44; line-height: 1.45; }
.ns-savings__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ns-green); color: #fff; border-radius: 999px;
  padding: 11px 20px; font-size: 15px; font-weight: 700;
}
.ns-body--app .ns-savings__btn:hover { background: var(--ns-green-dark); color: #fff; }
.ns-savings__art { flex: 0 0 38%; max-height: 140px; width: auto; object-fit: contain; }
.ns-savings__seal {
  position: absolute; top: 14px; right: 14px;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--ns-red); color: #fff;
  display: grid; place-content: center; text-align: center; line-height: 1.05;
}
.ns-savings__seal small { font-size: 10.5px; font-weight: 700; }
.ns-savings__seal strong { font-size: 22px; font-weight: 800; }

/* ---- Popular Categories ---- */
.ns-tilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ns-tilecat { text-align: center; }
.ns-tilecat__box {
  display: grid; place-items: center;
  aspect-ratio: 1 / 1; border-radius: 14px; margin-bottom: 7px;
  background: #eef4ff; color: #2563eb;
}
.ns-tilecat__box .ns-ico { width: 30px; height: 30px; }
.ns-tilecat__box--1 { background: #e8f7ee; color: #16a34a; }
.ns-tilecat__box--2 { background: #eef1ff; color: #4f46e5; }
.ns-tilecat__box--3 { background: #e9f8ef; color: #15803d; }
.ns-tilecat__box--4 { background: #fff3e0; color: #f59e0b; }
.ns-tilecat__box--5 { background: #f3e9ff; color: #7c3aed; }
.ns-tilecat__name { font-size: 13.5px; font-weight: 600; color: #374151; }

@media (min-width: 560px) {
  .ns-tilegrid { grid-template-columns: repeat(6, 1fr); }
  .ns-rail > .ns-card { flex-basis: 200px; }
}
@media (max-width: 420px) {
  .ns-hero__slide { min-height: 172px; padding: 16px; }
  .ns-hero__text span { font-size: 19px; }
  .ns-hero__text h2 { font-size: 26px; }
  .ns-hero__text p { font-size: 14px; margin-bottom: 12px; }
  .ns-hero__btn { padding: 9px 16px; font-size: 14px; }
  .ns-deals-head h3 { font-size: 18px; }
  .ns-timer b { min-width: 26px; padding: 3px 5px; font-size: 13px; }
  .ns-see-all { font-size: 12.5px; }
  .ns-savings { padding: 14px; gap: 6px; flex-wrap: wrap; }
  .ns-savings__text { flex: 1 1 100%; min-width: 0; padding-right: 74px; }
  .ns-savings__text h3 { font-size: 24px; }
  .ns-savings__text p { font-size: 13.5px; margin-bottom: 12px; }
  .ns-savings__art { flex: 0 0 100%; max-height: 110px; margin-top: 4px; }
  .ns-savings__seal { width: 66px; height: 66px; }
  .ns-savings__seal strong { font-size: 19px; }
}

/* ==========================================================================
   Product screen (docs/screens/02-product-details.jpeg)
   ========================================================================== */
.ns-gallery { margin-bottom: 14px; }
.ns-gallery__main {
  position: relative; aspect-ratio: 1 / 1;
  background: #f5f6f8; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
}
.ns-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.ns-gallery__main .ns-card__wish { top: 12px; right: 12px; width: 40px; height: 40px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ns-gallery__main .ns-card__wish .ns-ico { width: 22px; height: 22px; }
.ns-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: #fff; color: var(--ns-ink); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.ns-gallery__nav--prev { left: 10px; }
.ns-gallery__nav--prev .ns-ico { transform: rotate(180deg); }
.ns-gallery__nav--next { right: 10px; }
.ns-gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.ns-gallery__thumbs::-webkit-scrollbar { display: none; }
.ns-gallery__thumb {
  flex: 0 0 72px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background: #f5f6f8; border: 2px solid transparent; display: grid; place-items: center;
}
.ns-gallery__thumb.is-active { border-color: var(--ns-green); }
.ns-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }

.ns-product__title { margin: 4px 0 8px; font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; }
.ns-product__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ns-product__rating { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--ns-muted); }
.ns-product__rating .ns-ico { width: 18px; height: 18px; color: #f5a623; }
.ns-product__rating b { color: var(--ns-ink); font-size: 15.5px; }
.ns-product__off {
  margin-left: auto; background: #fdecec; color: var(--ns-red);
  border-radius: 8px; padding: 5px 10px; font-size: 14.5px; font-weight: 700;
}
.ns-product__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ns-product__price .ns-price-now, .ns-product__price .ns-price-now .amount { font-size: 29px; }
.ns-product__price .ns-price-was, .ns-product__price .ns-price-was .amount { font-size: 17px; }
.ns-stock {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px;
  background: var(--ns-green-soft); color: #15703c;
  border-radius: 9px; padding: 8px 12px; font-size: 14.5px; font-weight: 700;
}
.ns-stock .ns-ico { width: 18px; height: 18px; }
.ns-stock--out { background: #fdecec; color: #b91c1c; }

.ns-product__excerpt { font-size: 15px; color: #374151; line-height: 1.6; margin: 4px 0 16px; }
.ns-richtext { font-size: 15px; color: #374151; line-height: 1.65; }
.ns-richtext p { margin: 0 0 10px; }

/* WooCommerce's own add-to-cart form, dressed as the design's block. */
.ns-product__form { margin-bottom: 12px; }
.ns-product__form .quantity { display: inline-flex; align-items: center; margin: 0 0 12px; }
.ns-product__form .quantity input.qty {
  width: 92px; height: 48px; text-align: center;
  border: 1px solid var(--ns-line); border-radius: 10px;
  font: inherit; font-size: 16px; font-weight: 600;
}
.ns-product__form .single_add_to_cart_button,
.ns-body--app .single_add_to_cart_button {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 16px; border: 0; border-radius: 12px;
  background: var(--ns-green); color: #fff;
  font: inherit; font-size: 16.5px; font-weight: 700; cursor: pointer;
}
.ns-body--app .single_add_to_cart_button:hover { background: var(--ns-green-dark); }
.ns-product__form .variations { width: 100%; border: 0; margin: 0 0 8px; }
.ns-product__form .variations th,
.ns-product__form .variations td { display: block; padding: 0; border: 0; text-align: left; }
.ns-product__form .variations th label { display: block; margin: 8px 0 6px; font-size: 15px; font-weight: 700; }
.ns-product__form .variations select {
  width: 100%; height: 48px; padding: 0 12px;
  border: 1px solid var(--ns-line); border-radius: 10px;
  font: inherit; font-size: 15px; background: #fff;
}
.ns-product__form .woocommerce-variation-price { margin: 10px 0; }
.ns-product__form .reset_variations { display: inline-block; margin: 6px 0; font-size: 13.5px; color: var(--ns-muted); }
.ns-buy-now { margin-bottom: 16px; }

/* ==========================================================================
   Checkout details, account content, shop chips
   ========================================================================== */
.ns-fields .form-row,
.ns-fields p { margin: 0 0 12px; }
.ns-fields label {
  display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; color: #374151;
}
.ns-fields .required { color: var(--ns-red); text-decoration: none; }
.ns-fields input[type="text"],
.ns-fields input[type="tel"],
.ns-fields input[type="email"],
.ns-fields input[type="password"],
.ns-fields input[type="number"],
.ns-fields textarea,
.ns-fields select,
.ns-body--app .select2-container .select2-selection--single {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--ns-line); border-radius: 10px;
  font: inherit; font-size: 15px; background: #fff; color: var(--ns-ink);
}
.ns-fields textarea { min-height: 96px; }
.ns-body--app .select2-container .select2-selection--single { display: flex; align-items: center; }
.ns-body--app .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); }
.ns-fields h3 { margin: 14px 0 10px; font-size: 16px; font-weight: 700; }

.ns-payments { list-style: none; margin: 0; padding: 0; }
.ns-payments .ns-option { margin-bottom: 10px; }
/* The theme shows the gateway description as a floating tooltip; ours is inline. */
.ns-body--app .wc_payment_method > label:not(.ns-option),
.ns-body--app .payment_method_description,
.ns-body--app .wd-payment-desc,
.ns-body--app [class*="wd-buy-now"] { display: none !important; }
.ns-body--app .wc_payment_method { list-style: none; }
/* Our own "Reviews" heading is enough; WooCommerce repeats the count above it. */
.ns-body--app #reviews .woocommerce-Reviews-title { display: none; }
.ns-body--app .ns-option input[type="radio"] { flex: 0 0 auto; margin: 0; align-self: center; }
.ns-body--app .ns-option__text small { display: block; margin-top: 2px; }
/* Each gateway row is one card: no stray list bullets or leftover spacing. */
.ns-body--app .wc_payment_method { margin: 0; padding: 0; }
.ns-body--app .wc_payment_method > input[type="radio"] { display: none; }
.ns-body--app .wc_payment_method .ns-option { align-items: center; margin-bottom: 10px; }
.ns-body--app .wc_payment_method .ns-option__logo img { max-height: 26px; width: auto; }
.ns-body--app .woocommerce-privacy-policy-text { font-size: 13px; color: var(--ns-muted); margin: 10px 0 14px; }
.ns-body--app .woocommerce-privacy-policy-text p { margin: 0; }
.ns-payment-box {
  margin: -4px 0 12px; padding: 12px 14px;
  background: #f7f8fa; border-radius: 10px;
  font-size: 14px; color: #374151;
}
.ns-payment-box p { margin: 0 0 8px; }
.ns-payment-box p:last-child { margin-bottom: 0; }
.ns-body--app .place-order { margin-top: 14px; }
.ns-body--app .woocommerce-terms-and-conditions-wrapper { margin-bottom: 12px; font-size: 14px; }

.ns-summary-items { margin-bottom: 10px; }
.ns-summary-item { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--ns-line); }
.ns-summary-item:last-child { border-bottom: 0; }
.ns-summary-item .ns-thumb {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 9px; overflow: hidden;
  background: #f7f8fa; display: grid; place-items: center;
}
.ns-summary-item .ns-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ns-summary-item__text { flex: 1 1 auto; min-width: 0; }
.ns-summary-item__text strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.ns-summary-item__text small { font-size: 12.5px; color: var(--ns-muted); }
.ns-summary-item__total { font-weight: 700; font-size: 14.5px; }

.ns-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.ns-chips::-webkit-scrollbar { display: none; }
.ns-chip {
  flex: 0 0 auto; padding: 9px 15px; border-radius: 999px;
  background: #f4f5f7; color: #374151; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.ns-chip.is-active { background: var(--ns-green); color: #fff; }

.ns-pagination { margin: 18px 0 4px; }
.ns-pagination ul { list-style: none; display: flex; gap: 8px; justify-content: center; margin: 0; padding: 0; }
.ns-pagination a, .ns-pagination span {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--ns-line); border-radius: 10px; font-size: 15px; font-weight: 600;
}
.ns-pagination .current { background: var(--ns-green); border-color: var(--ns-green); color: #fff; }

/* WooCommerce's account endpoint content (orders table, addresses, forms). */
.ns-account-content .woocommerce-MyAccount-navigation { display: none; }
.ns-account-content .woocommerce-MyAccount-content { width: 100%; padding: 0; }
.ns-account-content table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ns-account-content table th,
.ns-account-content table td { padding: 10px 8px; border-bottom: 1px solid var(--ns-line); text-align: left; }
.ns-account-content .button,
.ns-account-content button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 18px; border: 0; border-radius: 10px;
  background: var(--ns-green); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.ns-account-content input[type="text"],
.ns-account-content input[type="email"],
.ns-account-content input[type="tel"],
.ns-account-content input[type="password"],
.ns-account-content select,
.ns-account-content textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--ns-line); border-radius: 10px; font: inherit; font-size: 15px;
}
.ns-account-content label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.ns-account-content p { margin: 0 0 12px; }
.ns-account-content fieldset { border: 1px solid var(--ns-line); border-radius: 12px; padding: 12px; margin: 14px 0; }

@media (min-width: 768px) {
  .ns-gallery { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .ns-product__title { font-size: 30px; }
}

/* ==========================================================================
   Icons used by the app screens (netshop-home.css defines .ns-ico itself).
   ========================================================================== */
.ns-ico--star-filled { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l3 6.6 7 .8-5.2 4.8 1.4 7-6.2-3.6L5.8 21.2l1.4-7L2 9.4l7-.8L12 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l3 6.6 7 .8-5.2 4.8 1.4 7-6.2-3.6L5.8 21.2l1.4-7L2 9.4l7-.8L12 2z'/%3E%3C/svg%3E"); }
.ns-ico--dots { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 10a2 2 0 100 4 2 2 0 000-4zm7 0a2 2 0 100 4 2 2 0 000-4zm7 0a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 10a2 2 0 100 4 2 2 0 000-4zm7 0a2 2 0 100 4 2 2 0 000-4zm7 0a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E"); }
.ns-ico--gamepad { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7h10a5 5 0 014.9 4l.9 5a2.6 2.6 0 01-4.7 2L16 16H8l-2.1 2a2.6 2.6 0 01-4.7-2l.9-5A5 5 0 017 7zm0 4v2H5v2h2v2h2v-2h2v-2H9v-2H7zm9 0a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4zm2.4 3a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7h10a5 5 0 014.9 4l.9 5a2.6 2.6 0 01-4.7 2L16 16H8l-2.1 2a2.6 2.6 0 01-4.7-2l.9-5A5 5 0 017 7zm0 4v2H5v2h2v2h2v-2h2v-2H9v-2H7zm9 0a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4zm2.4 3a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z'/%3E%3C/svg%3E"); }
.ns-ico--house { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3l9 8h-3v10h-5v-6h-2v6H6V11H3l9-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3l9 8h-3v10h-5v-6h-2v6H6V11H3l9-8z'/%3E%3C/svg%3E"); }
.ns-ico--user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a4.5 4.5 0 100 9 4.5 4.5 0 000-9zM4 21a8 8 0 0116 0v1H4v-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a4.5 4.5 0 100 9 4.5 4.5 0 000-9zM4 21a8 8 0 0116 0v1H4v-1z'/%3E%3C/svg%3E"); }
.ns-ico--trash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 3h6l1 2h4v2H4V5h4l1-2zM6 9h12l-1 12H7L6 9zm4 2v8h1.5v-8H10zm4 0v8h1.5v-8H14z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 3h6l1 2h4v2H4V5h4l1-2zM6 9h12l-1 12H7L6 9zm4 2v8h1.5v-8H10zm4 0v8h1.5v-8H14z'/%3E%3C/svg%3E"); }
.ns-ico--chev { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 5l7 7-7 7-1.5-1.5L13 12 7.5 6.5 9 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 5l7 7-7 7-1.5-1.5L13 12 7.5 6.5 9 5z'/%3E%3C/svg%3E"); }
.ns-ico--back { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 4l1.5 1.5L7 11h14v2H7l5.5 5.5L11 20l-8-8 8-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 4l1.5 1.5L7 11h14v2H7l5.5 5.5L11 20l-8-8 8-8z'/%3E%3C/svg%3E"); }
.ns-ico--pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E"); }
.ns-ico--truck { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 5h12v10H2V5zm13 3h4l3 4v3h-7V8zM6.5 16a2 2 0 100 4 2 2 0 000-4zm11 0a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 5h12v10H2V5zm13 3h4l3 4v3h-7V8zM6.5 16a2 2 0 100 4 2 2 0 000-4zm11 0a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E"); }
.ns-ico--card { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 5h20v4H2V5zm0 6h20v8H2v-8zm2 3v2h6v-2H4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 5h20v4H2V5zm0 6h20v8H2v-8zm2 3v2h6v-2H4z'/%3E%3C/svg%3E"); }
.ns-ico--wallet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 6h15a3 3 0 013 3v2h-6a3 3 0 000 6h6v2a2 2 0 01-2 2H4a2 2 0 01-2-2V7a1 1 0 011-1zm12 7h7v2h-7a1 1 0 010-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 6h15a3 3 0 013 3v2h-6a3 3 0 000 6h6v2a2 2 0 01-2 2H4a2 2 0 01-2-2V7a1 1 0 011-1zm12 7h7v2h-7a1 1 0 010-2z'/%3E%3C/svg%3E"); }
.ns-ico--coins { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3c4.4 0 8 1.3 8 3s-3.6 3-8 3-8-1.3-8-3 3.6-3 8-3zm8 6.5V12c0 1.7-3.6 3-8 3s-8-1.3-8-3V9.5c1.7 1.3 4.7 2 8 2s6.3-.7 8-2zm0 5V17c0 1.7-3.6 3-8 3s-8-1.3-8-3v-2.5c1.7 1.3 4.7 2 8 2s6.3-.7 8-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3c4.4 0 8 1.3 8 3s-3.6 3-8 3-8-1.3-8-3 3.6-3 8-3zm8 6.5V12c0 1.7-3.6 3-8 3s-8-1.3-8-3V9.5c1.7 1.3 4.7 2 8 2s6.3-.7 8-2zm0 5V17c0 1.7-3.6 3-8 3s-8-1.3-8-3v-2.5c1.7 1.3 4.7 2 8 2s6.3-.7 8-2z'/%3E%3C/svg%3E"); }
.ns-ico--ticket { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 7h20v3.5a2.5 2.5 0 000 5V19H2v-3.5a2.5 2.5 0 000-5V7zm5 3v4h2v-4H7zm4 0v4h2v-4h-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 7h20v3.5a2.5 2.5 0 000 5V19H2v-3.5a2.5 2.5 0 000-5V7zm5 3v4h2v-4H7zm4 0v4h2v-4h-2z'/%3E%3C/svg%3E"); }
.ns-ico--box { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l9 4.5v11L12 22 3 17.5v-11L12 2zm0 2.3L6.2 7 12 9.7 17.8 7 12 4.3zM5 9.1v7.2l6 3v-7.2l-6-3zm14 0l-6 3v7.2l6-3V9.1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l9 4.5v11L12 22 3 17.5v-11L12 2zm0 2.3L6.2 7 12 9.7 17.8 7 12 4.3zM5 9.1v7.2l6 3v-7.2l-6-3zm14 0l-6 3v7.2l6-3V9.1z'/%3E%3C/svg%3E"); }
.ns-ico--check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 18.2L3.3 12l2.1-2.1 4.1 4.1L18.6 5l2.1 2.1-11.2 11.1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.5 18.2L3.3 12l2.1-2.1 4.1 4.1L18.6 5l2.1 2.1-11.2 11.1z'/%3E%3C/svg%3E"); }
.ns-ico--check-badge { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14.4l-4-4L8.4 11l2.6 2.6L16 8.6l1.4 1.4-6.4 6.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14.4l-4-4L8.4 11l2.6 2.6L16 8.6l1.4 1.4-6.4 6.4z'/%3E%3C/svg%3E"); }
.ns-ico--edit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.2V21h3.8L18 9.8 14.2 6 3 17.2zM20.7 7.1a1 1 0 000-1.4l-2.4-2.4a1 1 0 00-1.4 0l-1.8 1.8L18.9 8.9l1.8-1.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.2V21h3.8L18 9.8 14.2 6 3 17.2zM20.7 7.1a1 1 0 000-1.4l-2.4-2.4a1 1 0 00-1.4 0l-1.8 1.8L18.9 8.9l1.8-1.8z'/%3E%3C/svg%3E"); }
.ns-ico--lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a5 5 0 015 5v3h1a1 1 0 011 1v10H5V11a1 1 0 011-1h1V7a5 5 0 015-5zm0 2a3 3 0 00-3 3v3h6V7a3 3 0 00-3-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a5 5 0 015 5v3h1a1 1 0 011 1v10H5V11a1 1 0 011-1h1V7a5 5 0 015-5zm0 2a3 3 0 00-3 3v3h6V7a3 3 0 00-3-3z'/%3E%3C/svg%3E"); }
.ns-ico--crown { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 7l4.5 3.5L12 4l4.5 6.5L21 7l-2 12H5L3 7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 7l4.5 3.5L12 4l4.5 6.5L21 7l-2 12H5L3 7z'/%3E%3C/svg%3E"); }
.ns-ico--headset { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a8 8 0 00-8 8v5a3 3 0 003 3h2v-8H6v-.4A6 6 0 0118 11v.6h-3V19h1a5 5 0 01-4 2v1.5c3 0 5.5-1.7 6.4-4.3A3 3 0 0020 16v-5a8 8 0 00-8-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3a8 8 0 00-8 8v5a3 3 0 003 3h2v-8H6v-.4A6 6 0 0118 11v.6h-3V19h1a5 5 0 01-4 2v1.5c3 0 5.5-1.7 6.4-4.3A3 3 0 0020 16v-5a8 8 0 00-8-8z'/%3E%3C/svg%3E"); }
.ns-ico--gear { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l2 1.6-1.7 3-2.4-.7-1.6 1 .3 2.5-3.2 1.1-1.4-2h-2l-1.4 2L6.4 19l.3-2.5-1.6-1-2.4.7L1 13.6 3 12 1 10.4l1.7-3 2.4.7 1.6-1L6.4 5l3.2-1.1 1.4 2h2l1.4-2L17.6 5l-.3 2.5 1.6 1 2.4-.7 1.7 3L21 12z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l2 1.6-1.7 3-2.4-.7-1.6 1 .3 2.5-3.2 1.1-1.4-2h-2l-1.4 2L6.4 19l.3-2.5-1.6-1-2.4.7L1 13.6 3 12 1 10.4l1.7-3 2.4.7 1.6-1L6.4 5l3.2-1.1 1.4 2h2l1.4-2L17.6 5l-.3 2.5 1.6 1 2.4-.7 1.7 3L21 12z'/%3E%3C/svg%3E"); }
.ns-ico--logout { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3H4a1 1 0 00-1 1v16a1 1 0 001 1h6v-2H5V5h5V3zm5.5 3.5L14 8l3 3H8v2h9l-3 3 1.5 1.5L21 12l-5.5-5.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3H4a1 1 0 00-1 1v16a1 1 0 001 1h6v-2H5V5h5V3zm5.5 3.5L14 8l3 3H8v2h9l-3 3 1.5 1.5L21 12l-5.5-5.5z'/%3E%3C/svg%3E"); }
.ns-ico--calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 2v2H4v18h16V4h-3V2h-2v2H9V2H7zM6 9h12v11H6V9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 2v2H4v18h16V4h-3V2h-2v2H9V2H7zM6 9h12v11H6V9z'/%3E%3C/svg%3E"); }
.ns-ico--clipboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2h6v2h3a1 1 0 011 1v16a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1h3V2zm-2 6v2h10V8H7zm0 4v2h10v-2H7zm0 4v2h7v-2H7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2h6v2h3a1 1 0 011 1v16a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1h3V2zm-2 6v2h10V8H7zm0 4v2h10v-2H7zm0 4v2h7v-2H7z'/%3E%3C/svg%3E"); }