/* =============================================
   LANDER CHECKOUT – Stylesheet
   Extends lander.css tokens (already loaded)
   Font  : Inter (body) — from lander.css
   Grid  : Bootstrap 5 — no custom flex/grid
   ============================================= */
   :root{
    /* Color: base */
    --atsz-navy-900:#08163A;
    --atsz-navy-800:#0C1F4D;
    --atsz-navy-700:#112A5E;
    --atsz-navy-600:#173670;
    --atsz-line:rgba(132,160,220,.18);
    --atsz-line-strong:rgba(132,160,220,.34);
    /* Color: signal */
    --atsz-green:#2BD47D;
    --atsz-green-600:#1FB866;
    --atsz-cyan:#22A6E3;
    --atsz-grad:linear-gradient(160deg,var(--atsz-green) 0%,var(--atsz-cyan) 100%);
    --atsz-glow-green:rgba(43,212,125,.35);
    /* Color: text */
    --atsz-ink:#FFFFFF;
    --atsz-ink-soft:#DCE4F5;
    --atsz-muted:#A7B4D4;
    --atsz-on-accent:#06223A;
  
    /* Type */
    --atsz-font-display:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
    --atsz-font-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
    --atsz-fs-xs:.8125rem;
    --atsz-fs-sm:.9375rem;
    --atsz-fs-base:1.0625rem;
    --atsz-fs-lg: 1.20rem;
    --atsz-fs-xl:1.625rem;
    --atsz-fs-2xl:clamp(1.9rem,1.3rem + 2.2vw,2.75rem);
    --atsz-fs-hero: clamp(2.4rem,1.4rem + 3.8vw,3.8rem);
    --atsz-lh-tight:1.1;
    --atsz-lh-body:1.65;
  
    /* Space */
    --atsz-sp-1:.25rem;
    --atsz-sp-2:.5rem;
    --atsz-sp-3:.75rem;
    --atsz-sp-4:1rem;
    --atsz-sp-5:1.5rem;
    --atsz-sp-6:2rem;
    --atsz-sp-7:3rem;
    --atsz-sp-8:4.5rem;
    --atsz-sp-9:7rem;
  
    /* Shape */
    --atsz-r-sm:4px;
    --atsz-r-md:8px;
    --atsz-r-lg:14px;
  
    /* Elevation */
    --atsz-shadow-card:0 24px 48px -24px rgba(2,8,28,.75);
    --atsz-shadow-lift:0 30px 60px -22px rgba(2,8,28,.9),0 0 0 1px var(--atsz-line-strong);
  
    /* Motion */
    --atsz-ease:cubic-bezier(.2,.7,.2,1);
    --atsz-dur-fast:.2s;
    --atsz-dur:.45s;
    --atsz-dur-slow:.9s;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }

/* ── Checkout Nav ──────────────────────────── */
.co-nav {
  padding: 14px 0 !important;
}

.co-nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.co-logo {
  font-size: 20px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  color: var(--color-text) !important;
}

.co-nav-trust {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

.co-trust-item {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-text-light) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.co-trust-item i {
  font-size: 14px !important;
  color: var(--color-text) !important;
}

/* ── Promo Banner ──────────────────────────── */
.co-promo-banner {
  background: #E9E8E7 !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 12px 24px !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}

.co-promo-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

/* ── Main Layout ───────────────────────────── */
.co-main {
  /* padding: 48px 0 64px !important; */
  padding-top: 93px;
  /* background: var(--color-bg) !important; */
}

.co-row {
  align-items: flex-start !important;
  gap: 0 !important;
}

/* ── Form Column ───────────────────────────── */
.co-form-col {
  padding-right: 48px !important;
}

/* ── Express Checkout ──────────────────────── */
.co-express-wrap {
  margin-bottom: 32px !important;
}

.co-express-label {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  color: var(--color-text-light) !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

.co-express-btns {
  margin-bottom: 20px !important;
}

.co-btn-paypal,
.co-btn-applepay {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  gap: 6px !important;
}

.co-btn-paypal {
  background: #FFC439 !important;
  color: #003087 !important;
}
.co-btn-paypal:hover { opacity: 0.88 !important; }

.co-btn-applepay {
  background: #000 !important;
  color: #fff !important;
  font-size: 18px !important;
  letter-spacing: 0.02em !important;
}
.co-btn-applepay:hover { opacity: 0.85 !important; }

.co-divider-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

.co-divider-line {
  flex: 1 !important;
  height: 1px !important;
  background: var(--color-border) !important;
}

.co-divider-text {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: var(--color-text-light) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* ── Section Block ─────────────────────────── */
.co-section {
  margin-bottom: 36px !important;
}

.co-section-title {
  font-family: var(--font-body) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--atsz-muted);
  margin-bottom: 20px !important;
  letter-spacing: -0.01em !important;
}

/* ── Field ─────────────────────────────────── */
.co-field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 24px !important;
}

.co-label {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: var(--atsz-muted);
  text-transform: uppercase !important;
}

.co-input {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #a1acc6 !important;
  background: #0a1a44;
  border: 1px solid rgba(120,150,215,.20);
  border-radius: 4px !important;
  padding: 12px 14px !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  line-height: normal !important;
  height: auto !important;
}

.co-input:focus {
  border-color: var(--color-text) !important;
}

.co-input::placeholder {
  color: #c0c0c0 !important;
}

/* Select wrapper */
.co-select-wrap {
  position: relative !important;
}

.co-select {
  padding-right: 36px !important;
  cursor: pointer !important;
}

.co-select-arrow {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 11px !important;
  color: var(--color-text-muted) !important;
  pointer-events: none !important;
}

/* ── Checkbox ──────────────────────────────── */
.co-checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #c1c1c1 !important;
  cursor: pointer !important;
  user-select: none !important;
}

.co-checkbox {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  accent-color: var(--color-text) !important;
}

/* ── Shipment Protection Box ───────────────── */
.co-protect-box {
  border: 1.5px dashed #0d2d7b;
  border-radius: 6px !important;
  padding: 16px 18px !important;
  background: #0c1b3d !important;
}

.co-protect-yes {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #929797 !important;
  text-transform: uppercase !important;
}

.co-protect-desc {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #8a929a !important;
  line-height: 1.55 !important;
  padding-left: 26px !important;
}

/* ── Shipping Options ──────────────────────── */
.co-shipping-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1px solid #2e4d94;
  border-radius: 6px !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
  gap: 12px !important;
}

.co-shipping-option:hover {
  border-color: #888 !important;
}

/* The runtime marks the chosen record by putting data-app-selected on the
   <shippingmethod> element; the --selected class is the older theme-JS hook
   and is kept so pages still running that JS are unaffected. */
[data-app-selected] .co-shipping-option,
.co-shipping-option--selected {
  border-color: var(--color-text) !important;
  border-width: 2px !important;
  background: #F5F3F3 !important;
}

.co-radio {
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
  accent-color: var(--color-text) !important;
  cursor: pointer !important;
}

.co-ship-name {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #545757 !important;
}

.co-ship-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--color-text-light) !important;
}

.co-ship-price {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  white-space: nowrap !important;
}

.co-ship-price--free {
  color: #1B1C1C !important;
  font-weight: 600 !important;
}

/* ── Payment Card Box ──────────────────────── */

.co-card-box {
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  padding: 20px !important;
}

.co-card-box .co-field-group{margin-bottom: 0 !important;}

.co-card-input-wrap {
  position: relative !important;
}

.co-card-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--color-text) !important;
  font-size: 15px !important;
  pointer-events: none !important;
}

.co-card-input {
  /* padding-left: 40px !important; */
}

.co-whats-this {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: var(--color-text-muted) !important;
  text-decoration: underline !important;
  text-transform: uppercase !important;
}
.co-whats-this:hover { color: #e7ebeb !important; }

/* ── Submit Button ─────────────────────────── */
.co-submit-btn {
  background: var(--color-text) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 18px 32px;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin-top: 8px;
}
.co-submit-btn:hover { background: #383838 !important; }

/* ── Below-button trust ────────────────────── */



.co-below-trust {
  padding-bottom: 4px !important;
}

.co-below-trust .co-trust-item {
  font-size: 13px !important;
  color: var(--atsz-muted)!important;
  font-weight: 700 !important;
}

.co-below-trust .co-trust-item i {
  color: var(--color-text) !important;
}

/* ── Order Summary Column ──────────────────── */
.co-summary-col {
  padding-left: 32px !important;
}

.co-summary-box {
  /* border: 1px solid var(--color-border) !important; */
  border-radius: 8px !important;
  padding: 28px !important;
  position: sticky !important;
  top: 80px !important;
  /* background: #fff; */
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--atsz-green);
  background: var(--atsz-navy-700);
}

.co-summary-title {
  font-family: var(--font-body) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--atsz-muted)!important;
  margin-bottom: 0 !important;
  letter-spacing: -0.01em !important;
}

.co-summary-hr {
  border: none !important;
  border-top: 1px solid #495774 !important;
  margin: 16px 0 !important;
  opacity: 1 !important;
}

/* Product row */
.co-product-row {
  align-items: center;
  margin-top: 31px;
}

.co-product-thumb {
  width: 96px !important;
  height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.co-product-thumb img{
  width: 100% !important;
  height: 100% !important;
}

.co-product-name {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--atsz-muted);
}

.co-product-sub {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--color-text-light) !important;
}

.co-product-price {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--atsz-muted);
  white-space: nowrap !important;
}

/* Line items */
.co-line-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.co-line-row {
  display: flex ;
  align-items: center ;
  justify-content: space-between ;
}

.co-line-label {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--atsz-muted);
}

.co-line-value {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--atsz-muted);
}

.co-line-discount {
  color: var(--color-text) !important;
}

.co-line-free {
  color: #2d8a4e !important;
  font-weight: 600 !important;
}

/* Grand total */
.co-total-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.co-total-label {
  font-family: var(--font-body) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--atsz-muted);
}

.co-total-value {
  font-family: var(--font-body) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #2bd47d !important;
}

/* Guarantee box */
.co-guarantee-box {
  background: #F5F3F3 !important;
  border-radius: 6px !important;
  padding: 16px !important;
  margin-top: 4px !important;
  border: 1px solid var(--color-border) !important;
}

.co-guarantee-icon {
  font-size: 20px !important;
  color: var(--color-text) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.co-guarantee-title {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}

.co-guarantee-desc {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text-light) !important;
  line-height: 1.55 !important;
}

.payment-options{opacity: 0.7 !important;}

/* ── Responsive ────────────────────────────── */
@media (max-width: 992px) {
  .co-form-col {
    padding-right: 0 !important;
    order: 2 !important;
  }

  .co-summary-col {
    padding-left: 0 !important;
    margin-bottom: 40px !important;
    order: 1 !important;
  }

  .co-summary-box {
    position: static !important;
  }

  .co-nav-trust {
    gap: 10px !important;
  }

  .co-row{flex-direction: column-reverse !important;}
  .co-form-col{margin-bottom: 50px !important;}
  .co-below-trust{margin-top: 35px !important;}
}

@media (max-width: 768px) {
  .co-main {
    padding: 28px 0 48px !important;
  }

  .co-express-btns {
    flex-direction: column !important;
  }

  .co-btn-paypal,
  .co-btn-applepay {
    width: 100% ;
  }
  .payment_box .co-checkbox-label{font-size: 14px !important;}
  
}

@media (max-width: 480px) {
  .co-summary-box {
    padding: 20px 16px !important;
  }
    .co-nav-trust{flex-direction: column !important;}
}

/* Payment Methods Premium Styles */
.payment-methods-wrapper {
  border: 1px solid rgb(84 105 160);
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  margin-top: 15px;
}

.payment-method-item {
  border-bottom: 1px solid rgb(84 105 160);
  transition: background-color 0.25s ease;
}

.payment-method-item:last-child {
  border-bottom: none;
}

.payment-method-header {
  cursor: pointer;
  background: #ffffff;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.payment-method-header:hover {
  background: #fbfbfb;
}

.payment-radio-input {
  width: 18px;
  height: 18px;
  accent-color: #dc3545;
  cursor: pointer;
}

.payment-method-title {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 15px;
  color: #fbffff;
}

.payment-method-logos {
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-method-logos img {
  height: 20px;
  opacity: 0.85;
}

.payment-method-details {
  background: #0e276a;
  display: none;
  border-top: 1px solid rgba(120,150,215,.20);
  padding: 20px;
}

/* Active option style.
   The runtime marks the chosen method with data-app-selected on the block
   itself; .active-method is the older theme-JS hook, kept so pages still
   running that JS are unaffected. */
.payment-method-item[data-app-selected] .payment-method-details,
.payment-method-item.active-method .payment-method-details {
  display: block;
}

.payment-method-item[data-app-selected] .payment-method-header,
.payment-method-item.active-method .payment-method-header {
  background: var(--atsz-grad);
  color: #fff;
}

.payment-method-content img{
  width: 140px;
}
/* ── Cross-sell / Related Products ─────────── */
.co-crosssell-box {
  border: 1.5px dashed #153177 !important;
  border-radius: 6px !important;
  padding: 16px 18px !important;
  background: #0d2047 !important;
}

.co-crosssell-title {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #8b9191 !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

/* <crosssellproduct> is an unknown element and defaults to display:inline,
   which breaks the flex row inside it. */
.co-crosssell-box crosssellproduct {
  display: block !important;
}

.co-crosssell-box crosssellproduct + crosssellproduct {
  margin-top: 10px !important;
}

.related-product {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

.related-product:hover {
  border-color: var(--color-text-light) !important;
}

/* Selected state.
   The runtime marks the chosen record by putting data-app-selected on the
   <crosssellproduct> element, so match that too — the .rp-added class is only
   set by the older theme JS and is left in place for pages still using it. */
[data-app-selected] .related-product,
.related-product.rp-added {
  border-color: var(--color-text) !important;
  box-shadow: 0 0 0 1px var(--color-text) inset !important;
}

.rp-thumb {
  width: 46px !important;
  height: 46px !important;
  flex-shrink: 0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #F5F3F3 !important;
}

.rp-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.rp-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.rp-name {
  display: block !important;
  width: 100% !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.rp-price {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}

/* Add / Added button */
.btn-product-select {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 110px !important;
  min-width: 84px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  padding: 7px 14px !important;
  border: 1px solid var(--color-text) !important;
  border-radius: 4px !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--color-text) !important;
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease !important;
}

.btn-product-select:hover {
  background: var(--color-text) !important;
  color: #fff !important;
}

[data-app-selected] .btn-product-select,
.related-product.rp-added .btn-product-select {
  background: var(--color-text) !important;
  color: #fff !important;
}

/* Toggle the Add / Added labels */
.rp-btn-added,
[data-app-selected] .rp-btn-add,
.related-product.rp-added .rp-btn-add {
  display: none !important;
}

[data-app-selected] .rp-btn-added,
.related-product.rp-added .rp-btn-added {
  display: inline !important;
}

/* Disabled when extended-subscription is on */
.related-product.cross-disabled {
  opacity: .5 !important;
  pointer-events: none !important;
}

@media (max-width: 575px) {
  .rp-name { font-size: 13px !important; }
  .btn-product-select { min-width: 72px !important; padding: 6px 10px !important; }
}


/* ============================================================
   Selected-state feedback — class-independent fallback (FIX-A / FIX-F)

   The theme's own selected-state rules key on class names
   (e.g. `[data-app-selected] .co-shipping-option`), so renaming a class would
   silently remove the feedback. These rules key ONLY on the contract attribute
   and the record tag, so the paint survives any class rename. The theme's own
   rules still win where they apply — this is the floor, not a replacement.
   ============================================================ */
product[data-app-selected],
shippingmethod[data-app-selected],
crosssellproduct[data-app-selected] {
  background-color: rgba(0, 0, 0, 0.035);
}



/* ============================================================
   Select-button label swap (FIX-A)

   The wording lives in the HTML, not here: each button carries its own
   `data-app-added="..."` and CSS reads it with attr(). Change the word in the
   markup and the button follows — no CSS edit needed.

     <button data-app="select" data-app-added="Added">
       <span class="sel-label">Add</span>
     </button>

   The runtime marks the clicked control with `data-app-selected`, so the swap
   is driven purely by the contract attribute.
   ============================================================ */
/* Label swap now lives in app_assets/css/app.css (contract). */

/* Filled look so the change is unmistakable.
   Scoped to BUTTON/label controls: on some themes the record tag itself
   carries data-app="select", and painting that turned the whole shipping row
   into a black bar. */
/* The chosen card's button gets the filled look. Reached from the RECORD so
   it works whether the hook sits on the button or on the whole card div. */
button[data-app="select"][data-app-selected],
label[data-app="select"][data-app-selected],
product[data-app-selected] button[data-app-added],
crosssellproduct[data-app-selected] button[data-app-added] {
  background-color: #1a1c1c !important;
  border-color: #1a1c1c !important;
  color: #fff !important;
}