:root{
  --bg:#070b12;
  --panel:#0b111b;
  --panel-2:#0d1521;
  --panel-3:#101925;

  --line:#1c2938;
  --line-strong:#29415c;

  --text:#f4f7fb;
  --muted:#8491a5;
  --muted-2:#607087;

  --blue:#4da3ff;
  --green:#3de1a1;
  --amber:#ffbf4a;
  --red:#ff6677;
  --violet:#b487ff;

  --sidebar:232px;
}






/* =====================================================
   Price Seting PAGE

   Rules for this page:
   - no colour gradients
   - no glow shadows
   - no hover translate / movement
===================================================== */


*{
  box-sizing:border-box;
}


html,
body{
  margin:0;
  min-height:100%;

  background:var(--bg);

  color:var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


body{
  min-height:100vh;
  overflow-x:hidden;
}


button,
input{
  font:inherit;
}


button{
  color:inherit;
}


/* =====================================================
   APP
===================================================== */

.app{
  min-height:100vh;

  display:grid;

  grid-template-columns:
    var(--sidebar)
    minmax(0,1fr);
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{
  position:fixed;

  left:0;
  top:0;
  bottom:0;

  width:var(--sidebar);

  z-index:20;

  display:flex;
  flex-direction:column;

  padding:
    20px
    14px
    16px;

  border-right:
    1px solid
    var(--line);

  background:#070c14;
}


.brand{
  display:flex;
  align-items:center;

  gap:12px;

  padding:
    4px
    10px
    20px;
}


.brand-mark{
  width:36px;
  height:36px;

  position:relative;

  flex:0 0 36px;

  overflow:hidden;

  border:
    1px solid
    #376992;

  border-radius:10px;

  background:#102033;
}


.brand-mark span{
  position:absolute;

  width:5px;

  border-radius:2px;

  background:#7dbaff;

  rotate:27deg;
}


.brand-mark span:first-child{
  left:11px;
  top:4px;

  height:27px;
}


.brand-mark span:last-child{
  right:8px;
  top:10px;

  height:23px;
}


.brand h1{
  margin:0;

  font-size:21px;
  font-weight:800;
  line-height:1;
}


.brand > div > span{
  display:block;

  margin-top:4px;

  color:var(--muted);

  font-size:11px;
}


.nav-title{
  padding:
    12px
    12px
    8px;

  color:#536175;

  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
}


.nav{
  display:flex;
  flex-direction:column;

  gap:5px;
}


.nav a{
  position:relative;

  min-height:41px;

  display:flex;
  align-items:center;

  gap:11px;

  padding:
    10px
    12px;

  border:
    1px solid
    transparent;

  border-radius:10px;

  background:transparent;

  color:#94a0b3;

  text-decoration:none;

  font-size:13px;

  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease;
}


.nav a:hover{
  background:#0d1622;

  border-color:#192637;

  color:#dce7f7;
}


.nav a.active{
  background:#102033;

  border-color:#2d5d8b;

  color:#ffffff;
}


.nav a.active::before{
  content:"";

  position:absolute;

  left:0;

  width:3px;
  height:22px;

  border-radius:
    0
    3px
    3px
    0;

  background:#4da3ff;
}


.nav-icon{
  width:18px;
  height:18px;

  flex:0 0 18px;

  display:grid;
  place-items:center;

  border:
    1px solid
    #36506d;

  border-radius:5px;

  color:#9ccaff;

  font-size:10px;
}


.sidebar-bottom{
  margin-top:auto;

  padding:
    12px
    10px
    4px;
}


.system-pill{
  display:flex;
  align-items:center;

  gap:9px;

  padding:11px;

  border:
    1px solid
    #1a2a3b;

  border-radius:12px;

  background:#0a111b;

  color:#aeb8c6;

  font-size:11px;
}


.system-pill b{
  display:block;

  color:#dce6f2;

  font-size:11px;
}


.system-pill small{
  display:block;

  margin-top:2px;

  color:#647387;

  font-size:10px;
}


.system-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--green);
}


/* =====================================================
   MAIN / TOPBAR
===================================================== */

.main{
  grid-column:2;

  min-width:0;
}


.topbar{
  position:sticky;

  top:0;

  z-index:15;

  height:64px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:
    0
    28px;

  border-bottom:
    1px solid
    var(--line);

  background:#080d15;
}


.topbar-title{
  display:flex;
  align-items:center;

  gap:10px;
}


.topbar-lock{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border:
    1px solid
    #315575;

  border-radius:9px;

  background:#0b1724;

  color:#8fc6ff;

  font-size:16px;
}


.topbar-title strong{
  display:block;

  font-size:13px;
  font-weight:800;
}


.topbar-title small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:10px;
}


.top-actions{
  display:flex;
  align-items:center;

  gap:10px;

  color:var(--muted);

  font-size:12px;
}


.draft-pill{
  padding:
    5px
    9px;

  border:
    1px solid
    #5f4a18;

  border-radius:999px;

  background:#1d180c;

  color:#f3c96b;

  font-size:10px;
  font-weight:800;
}


.avatar{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#1d4776;

  color:#ffffff;

  font-size:11px;
  font-weight:800;
}


.content{
  --expanded-content-max:1600px;
  width:100%;

  max-width:1600px;

  margin:
    0
    auto;

  padding:
    28px
    28px
    52px;
}


/* =====================================================
   INTERNAL PAGES
===================================================== */

.price-page{
  display:none;
}


.price-page.active{
  display:block;
}


.page-fade{
  animation:
    pageFade
    .22s
    ease
    both;
}


@keyframes pageFade{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}


/* =====================================================
   LANDING
===================================================== */

.landing-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:18px;

  margin-bottom:22px;
}


.eyebrow{
  margin-bottom:7px;

  color:#6f86a0;

  font-size:10px;
  font-weight:850;

  letter-spacing:.15em;
  text-transform:uppercase;
}


.landing-heading h2{
  margin:
    0
    0
    7px;

  font-size:30px;
  font-weight:900;
  letter-spacing:-.035em;
}


.landing-heading p{
  max-width:700px;

  margin:0;

  color:var(--muted);

  font-size:13px;
  line-height:1.55;
}


.landing-status{
  padding:
    7px
    10px;

  border:
    1px solid
    #2b4057;

  border-radius:9px;

  background:#0a131e;

  color:#9aabbd;

  font-size:10px;
  font-weight:800;
}


/* =====================================================
   2 × 2 STORE GRID + FIFTH STORE
===================================================== */

.store-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;

  align-items:stretch;
}


.store-card{
  --accent:#4da3ff;
  --surface:#0b1520;

  position:relative;

  min-height:235px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  overflow:hidden;

  padding:23px;

  border:
    1px solid
    #2a3d52;

  border-radius:20px;

  background:var(--surface);

  text-align:left;

  cursor:pointer;

  box-shadow:none;

  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease;
}


.store-card.shopify{
  --accent:#3de1a1;
  --surface:#0a1816;
}


.store-card.amazon{
  --accent:#ffbf4a;
  --surface:#18140b;
}


.store-card.ebay{
  --accent:#78afff;
  --surface:#0b1420;
}


.store-card.bnq{
  --accent:#ff7b98;
  --surface:#1a1015;
}


.store-card.neshome{

  --accent:#b487ff;

  --surface:#15101d;

}


.store-card.bnq{

  --accent:#ff7b98;

  --surface:#1a1015;

}


.store-card.onbuy{

  --accent:#5fdcff;

  --surface:#0a1720;

}


.store-card.manob2b{

  --accent:#63d89a;

  --surface:#0c1815;

}


.store-card.manob2c{

  --accent:#ff9966;

  --surface:#1b120e;

}


.store-card:hover{
  border-color:var(--accent);
}


.store-card:focus-visible{
  outline:
    2px solid
    var(--accent);

  outline-offset:3px;
}


.store-card-index{
  position:absolute;

  top:19px;
  right:21px;

  color:#65768a;

  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
}


.store-card-main{
  display:flex;
  align-items:center;

  gap:17px;

  margin-top:23px;
}


.store-badge{
  width:62px;
  height:62px;

  flex:0 0 62px;

  display:grid;
  place-items:center;

  border:
    1px solid
    var(--accent);

  border-radius:16px;

  background:#09131e;

  color:var(--accent);

  font-size:25px;
  font-weight:900;
}


.store-copy strong{
  display:block;

  color:#f1f6fc;

  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
}


.store-copy small{
  display:block;

  margin-top:6px;

  color:#708197;

  font-size:11px;
}


.store-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding-top:20px;

  border-top:
    1px solid
    #243447;
}


.store-card-footer span{
  color:#7e8fa4;

  font-size:11px;
  font-weight:700;
}


.store-card-footer b{
  color:var(--accent);

  font-size:22px;
  font-weight:700;
}


/*
   Solid single-colour LED line.
   No gradient.
   No glow.
*/
.card-led{
  position:absolute;

  left:-72px;
  top:-1px;

  width:72px;
  height:2px;

  background:var(--accent);

  opacity:.95;

  pointer-events:none;

  animation:
    storeLedSweep
    4.4s
    linear
    infinite;
}


.store-card:nth-child(2) .card-led{
  animation-delay:.4s;
}


.store-card:nth-child(3) .card-led{
  animation-delay:.8s;
}


.store-card:nth-child(4) .card-led{
  animation-delay:1.2s;
}


.store-card:nth-child(6) .card-led{

  animation-delay:2.0s;

}


.store-card:nth-child(7) .card-led{

  animation-delay:2.4s;

}


.store-card:nth-child(8) .card-led{

  animation-delay:2.8s;

}


@keyframes storeLedSweep{
  0%{
    left:-72px;
    opacity:0;
  }

  8%{
    opacity:.95;
  }

  82%{
    opacity:.95;
  }

  100%{
    left:calc(100% + 2px);
    opacity:0;
  }
}


/* =====================================================
   LANDING PROMPT
===================================================== */

.store-start-panel{
  min-height:235px;

  display:flex;
  align-items:center;

  gap:17px;

  padding:23px;

  border:
    1px dashed
    #31455b;

  border-radius:20px;

  background:#09111b;
}


.store-start-icon{
  width:62px;
  height:62px;

  flex:0 0 62px;

  display:grid;
  place-items:center;

  border:
    1px solid
    #315575;

  border-radius:16px;

  background:#0b1724;

  color:#8fc6ff;

  font-size:20px;
}


.store-start-kicker{
  display:block;

  margin-bottom:6px;

  color:#6f8298;

  font-size:9px;
  font-weight:850;

  letter-spacing:.13em;
  text-transform:uppercase;
}


.store-start-panel h3{
  margin:
    0
    0
    7px;

  color:#e5edf6;

  font-size:17px;
  font-weight:850;
}


.store-start-panel p{
  max-width:480px;

  margin:0;

  color:#718096;

  font-size:11px;
  line-height:1.55;
}


/* =====================================================
   DETAIL PAGE HEADING
===================================================== */

.detail-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:18px;

  margin-bottom:18px;
}


.detail-heading-left{
  display:flex;
  flex-direction:column;

  gap:16px;
}


.back-button{
  width:max-content;

  padding:
    7px
    10px;

  border:
    1px solid
    #2d4055;

  border-radius:8px;

  background:#0a131e;

  color:#9aabbd;

  cursor:pointer;

  font-size:10px;
  font-weight:800;

  box-shadow:none;

  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease;
}


.back-button:hover{
  background:#0d1824;

  border-color:#48647f;

  color:#dce6f2;
}


.selected-store-title{
  display:flex;
  align-items:center;

  gap:14px;
}


.selected-store-badge{
  width:56px;
  height:56px;

  display:grid;
  place-items:center;

  border:
    1px solid
    var(--selected-accent,#4da3ff);

  border-radius:15px;

  background:#09131e;

  color:
    var(--selected-accent,#4da3ff);

  font-size:23px;
  font-weight:900;
}


.selected-store-label{
  display:block;

  margin-bottom:3px;

  color:#6c8097;

  font-size:9px;
  font-weight:850;

  text-transform:uppercase;
  letter-spacing:.13em;
}


.selected-store-title h2{
  margin:
    0
    0
    4px;

  font-size:27px;
  font-weight:900;
  letter-spacing:-.03em;
}


.selected-store-title p{
  margin:0;

  color:var(--muted);

  font-size:11px;
}


.detail-draft-status{
  padding:
    7px
    10px;

  border:
    1px solid
    #5a4b1c;

  border-radius:9px;

  background:#1b170b;

  color:#e5c36d;

  font-size:10px;
  font-weight:850;
}


/* =====================================================
   DETAIL PANELS
===================================================== */

.detail-panel{
  margin-bottom:16px;

  padding:19px;

  border:
    1px solid
    var(--line);

  border-radius:18px;

  background:#0b111b;
}


.panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:18px;

  margin-bottom:15px;
}


.panel-kicker{
  display:block;

  margin-bottom:5px;

  color:#6d8199;

  font-size:9px;
  font-weight:850;

  letter-spacing:.14em;
  text-transform:uppercase;
}


.panel-heading h3{
  margin:
    0
    0
    5px;

  color:#eff5fb;

  font-size:17px;
  font-weight:850;
}


.panel-heading p{
  margin:0;

  color:var(--muted);

  font-size:11px;
}


/* =====================================================
   COMPARISON
===================================================== */

.comparison-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.comparison-card{
  --accent:#4da3ff;

  position:relative;

  min-height:145px;

  overflow:hidden;

  padding:16px;

  border:
    1px solid
    var(--accent);

  border-radius:16px;

  background:#0a1420;
}


.comparison-card.shopify{
  --accent:#3de1a1;
}


.comparison-card.amazon{
  --accent:#ffbf4a;
}


.comparison-card.ebay{
  --accent:#78afff;
}


.comparison-card.bnq{
  --accent:#ff7b98;
}


.comparison-card::after{
  content:"";

  position:absolute;

  left:-50px;
  top:-1px;

  width:50px;
  height:2px;

  background:var(--accent);

  pointer-events:none;

  animation:
    comparisonLedSweep
    4s
    linear
    infinite;
}


.comparison-card:nth-child(2)::after{
  animation-delay:.45s;
}


.comparison-card:nth-child(3)::after{
  animation-delay:.90s;
}


.comparison-card:nth-child(4)::after{
  animation-delay:1.35s;
}


@keyframes comparisonLedSweep{
  0%{
    left:-50px;
    opacity:0;
  }

  10%{
    opacity:1;
  }

  82%{
    opacity:1;
  }

  100%{
    left:calc(100% + 2px);
    opacity:0;
  }
}


.comparison-head{
  display:flex;
  align-items:center;

  gap:10px;
}


.comparison-badge{
  width:35px;
  height:35px;

  display:grid;
  place-items:center;

  border:
    1px solid
    var(--accent);

  border-radius:9px;

  background:#09131e;

  color:var(--accent);

  font-size:14px;
  font-weight:900;
}


.comparison-head strong{
  color:#edf4fc;

  font-size:13px;
}


.comparison-rate-label{
  margin-top:23px;

  color:#7c8a9d;

  font-size:9px;
  font-weight:850;

  text-transform:uppercase;
  letter-spacing:.12em;
}


.comparison-rate-value{
  margin-top:5px;

  color:#7f8c9f;

  font-size:26px;
  font-weight:900;
  letter-spacing:-.03em;
}


/* =====================================================
   TABLE
===================================================== */

.rate-table-shell{

  max-height:
    620px;

  overflow-x:
    auto;

  overflow-y:
    auto;

  border:
    1px solid
    #203044;

  border-radius:
    13px;

  background:
    #08111a;

  scrollbar-width:
    thin;

  scrollbar-color:
    #3f6d94
    #08111a;
}


/* Chrome / Edge scrollbar */

.rate-table-shell::-webkit-scrollbar{

  width:
    10px;

  height:
    10px;
}


.rate-table-shell::-webkit-scrollbar-track{

  background:
    #08111a;
}


.rate-table-shell::-webkit-scrollbar-thumb{

  background:
    #3f6d94;

  border:
    2px solid
    #08111a;

  border-radius:
    999px;
}


.rate-table-shell::-webkit-scrollbar-thumb:hover{

  background:
    #5b8fba;
}
.rate-table
thead
th{

  position:
    sticky;

  top:
    0;

  z-index:
    3;
}

.rate-table{

  width:100%;

  min-width:1280px;

  table-layout:fixed;

  border-collapse:collapse;

}

.rate-table th:first-child,
.rate-table td:first-child{

  width:250px;

}

.rate-table th,
.rate-table td{
  padding:
    11px
    13px;

  border-bottom:
    1px solid
    #182536;

  text-align:left;
}


.rate-table th{
  background:#0e1722;

  color:#8796aa;

  font-size:10px;
  font-weight:800;

  letter-spacing:.07em;
  text-transform:uppercase;
}


.rate-table th:not(:first-child){
  text-align:center;
}


.rate-table tr:last-child td{
  border-bottom:none;
}


.rate-table tbody tr{
  background:#09121c;

  transition:
    background-color .14s ease;
}


.rate-table tbody tr:hover{
  background:#0d1824;
}


.category-cell{
  min-width:220px;
}


/* =====================================================
   RATE HEADER ABBREVIATION / FULL NAME
   Fixed size — hover never changes column width
===================================================== */

.rate-weight-heading{

  position:relative;

  display:block;

  width:100%;

  height:24px;

  min-width:0;

  overflow:visible;

  cursor:default;

}


/*
 * Both versions occupy exactly the same space.
 * We only fade between them.
 */

.rate-weight-short,
.rate-weight-full{

  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  white-space:nowrap;

  transition:
    opacity .15s ease;

}


.rate-weight-short{

  opacity:1;

}


.rate-weight-full{

  opacity:0;

  font-size:9px;

  letter-spacing:.04em;

}


/* Hover = wording change ONLY */

.rate-weight-heading:hover
.rate-weight-short{

  opacity:0;

}


.rate-weight-heading:hover
.rate-weight-full{

  opacity:1;

}

.category-name{
  display:flex;
  align-items:center;

  gap:9px;

  color:#e8eff7;

  font-size:12px;
  font-weight:750;
}


.category-index{
  width:24px;
  height:24px;

  flex:0 0 24px;

  display:grid;
  place-items:center;

  border:
    1px solid
    #2d4055;

  border-radius:7px;

  background:#0b1520;

  color:#71849b;

  font-size:9px;
  font-weight:850;
}


/* =====================================================
   HIGH BASE — GREEN
===================================================== */

.rate-table th:nth-child(2),
.rate-table th:nth-child(3){

  color:#55e6a8;

  background:
    rgba(
      34,
      150,
      105,
      .10
    );

}

/* HIGH BASE — COLUMN BACKGROUND */

.rate-table td:nth-child(2),
.rate-table td:nth-child(3){

  background:
    rgba(
      34,
      150,
      105,
      .045
    );

}



/* =====================================================
   MEDIUM BASE — YELLOW
===================================================== */

.rate-table th:nth-child(4),
.rate-table th:nth-child(5){

  color:#ffd15a;

  background:
    rgba(
      180,
      130,
      20,
      .10
    );

}


/* MEDIUM BASE — COLUMN BACKGROUND */

.rate-table td:nth-child(4),
.rate-table td:nth-child(5){

  background:
    rgba(
      180,
      130,
      20,
      .045
    );

}
/* =====================================================
   LOW BASE — RED
===================================================== */

.rate-table th:nth-child(6),
.rate-table th:nth-child(7){

  color:#ff8398;

  background:
    rgba(
      170,
      55,
      75,
      .10
    );

}

/* LOW BASE — COLUMN BACKGROUND */

.rate-table td:nth-child(6),
.rate-table td:nth-child(7){

  background:
    rgba(
      170,
      55,
      75,
      .045
    );

}


.rate-input-cell{
  text-align:center !important;
}


.rate-input{
  width:96px;
  height:38px;

  padding:
    0
    10px;

  border:
    1px solid
    #2c4056;

  border-radius:9px;

  outline:none;

  background:#0a131e;

  color:#eaf1f8;

  text-align:center;

  font-size:12px;
  font-weight:800;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;
}


.rate-input:hover{
  border-color:#486786;
}


.rate-input:focus{
  border-color:#4da3ff;

  background:#0d1926;

  color:#ffffff;
}


.rate-input::-webkit-outer-spin-button,
.rate-input::-webkit-inner-spin-button{
  margin:0;

  -webkit-appearance:none;
}


.save-button{
  min-width:106px;
  height:38px;

  padding:
    0
    14px;

  border:
    1px solid
    #366a56;

  border-radius:9px;

  background:#10251d;

  color:#84e1b8;

  cursor:pointer;

  font-size:11px;
  font-weight:850;

  box-shadow:none;

  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease;
}


.save-button:hover{
  border-color:#4b8b70;

  background:#143027;

  color:#a8ebce;
}


.save-status{
  min-height:16px;

  margin-top:10px;

  color:#718096;

  font-size:10px;
}


.save-status.success{
  color:#7fe1b6;
}


/* =====================================================
   MULTIPLIERS
===================================================== */

.multiplier-layout{
  display:grid;

  grid-template-columns:
    minmax(220px,.85fr)
    auto
    minmax(220px,.85fr)
    minmax(300px,1.3fr);

  align-items:center;

  gap:12px;
}


.multiplier-field{
  min-height:132px;

  padding:14px;

  border:
    1px solid
    #26384c;

  border-radius:13px;

  background:#09121c;
}


.multiplier-field label{
  display:block;

  margin-bottom:9px;

  color:#9babbf;

  font-size:10px;
  font-weight:800;
}


.multiplier-input-wrap{
  display:grid;

  grid-template-columns:
    32px
    1fr;

  overflow:hidden;

  height:44px;

  border:
    1px solid
    #31465e;

  border-radius:9px;

  background:#0b1520;
}


.multiplier-input-wrap > span{
  display:grid;
  place-items:center;

  border-right:
    1px solid
    #31465e;

  color:#7592b2;

  font-size:14px;
  font-weight:900;
}


.multiplier-input-wrap input{
  width:100%;

  min-width:0;

  padding:
    0
    12px;

  border:0;

  outline:0;

  background:#0b1520;

  color:#f1f6fc;

  font-size:15px;
  font-weight:900;
}


.multiplier-field small{
  display:block;

  margin-top:8px;

  color:#66788e;

  font-size:9px;
}


.multiplier-symbol{
  color:#60758d;

  font-size:19px;
  font-weight:900;
}


.formula-preview{
  min-height:132px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    15px
    17px;

  border:
    1px solid
    #2b4a42;

  border-radius:13px;

  background:#0b1815;
}


.formula-preview > span{
  margin-bottom:8px;

  color:#6f9c8c;

  font-size:9px;
  font-weight:850;

  text-transform:uppercase;
  letter-spacing:.12em;
}


.formula-preview strong{
  color:#d9f3e8;

  font-size:16px;
  font-weight:850;
}


.formula-preview strong i{
  padding:
    0
    4px;

  color:#66867a;

  font-style:normal;
}


.formula-preview strong b{
  color:#67d8aa;
}


.formula-preview small{
  display:block;

  margin-top:9px;

  color:#628174;

  font-size:9px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1200px){

  .comparison-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .multiplier-layout{
    grid-template-columns:
      1fr
      auto
      1fr;
  }


  .formula-preview{
    grid-column:
      1 / -1;
  }
}


@media(max-width:900px){

  :root{
    --sidebar:76px;
  }


  .brand h1,
  .brand > div > span,
  .nav a > span:last-child,
  .nav-title,
  .sidebar-bottom{
    display:none;
  }


  .brand{
    justify-content:center;

    padding-left:0;
    padding-right:0;
  }


  .nav a{
    justify-content:center;

    padding:
      10px;
  }


  .content{
    padding:
      20px
      14px
      34px;
  }


  .topbar{
    padding:
      0
      14px;
  }


  .admin-label{
    display:none;
  }


  .store-grid{
    grid-template-columns:1fr;
  }


  .comparison-grid{
    grid-template-columns:1fr;
  }


  .landing-heading,
  .detail-heading{
    align-items:flex-start;

    flex-direction:column;
  }


  .multiplier-layout{
    grid-template-columns:1fr;
  }


  .multiplier-symbol{
    display:none;
  }


  .formula-preview{
    grid-column:auto;
  }
}
































































/* =====================================================
   CUSTOMER SERVICE PAGE
   APPEND TO THE BOTTOM OF calculator.css

   Rules for this page:
   - no colour gradients
   - no glow shadows
   - no hover translate / movement
===================================================== */


/* =====================================================
   CUSTOMER SERVICE — REMOVE LEGACY GRADIENT / GLOW
===================================================== */

body[data-page="customer-service"]::before,
body[data-page="customer-service"]::after{
    background:#070b12 !important;
    background-image:none !important;
}


body[data-page="customer-service"] *,
body[data-page="customer-service"] *::before,
body[data-page="customer-service"] *::after{
    text-shadow:none !important;
}


body[data-page="customer-service"] .card,
body[data-page="customer-service"] .sidebar,
body[data-page="customer-service"] .topbar,
body[data-page="customer-service"] .login-overlay,
body[data-page="customer-service"] .login-box,
body[data-page="customer-service"] .result-bar,
body[data-page="customer-service"] .mult-card,
body[data-page="customer-service"] .base-choice,
body[data-page="customer-service"] .base-adjust-button{
    background-image:none !important;
    box-shadow:none !important;
}


body[data-page="customer-service"] .card{
    background:#0b111b !important;
}


body[data-page="customer-service"] .card::after{
    display:none !important;
}


body[data-page="customer-service"] button:hover,
body[data-page="customer-service"] a:hover,
body[data-page="customer-service"] .card:hover{
    transform:none !important;
    filter:none !important;
}


body[data-page="customer-service"] .base-choice::before,
body[data-page="customer-service"] .base-adjust-button::before{
    display:none !important;
}


body[data-page="customer-service"] .dot{
    box-shadow:none !important;
}


/* =====================================================
   CUSTOMER SERVICE — TOP STORE BUTTONS
===================================================== */

/* =====================================================
   CUSTOMER SERVICE — STORE SELECTOR CARDS

   Compact version of Alfred's platform summary banners.
   Store selector only:
   - no selling price
   - no rate
   - no subtitle
===================================================== */

.cs-store-strip{
    display:grid;
    grid-template-columns:
        repeat(8,minmax(0,1fr));

    gap:10px;

    margin-bottom:18px;
}


/* =====================================================
   BASE CARD
===================================================== */

.cs-store-card{

    --cs-store-accent:#4da3ff;
    --cs-store-soft:rgba(77,163,255,.16);
    --cs-store-border:rgba(77,163,255,.42);

    appearance:none;
    -webkit-appearance:none;

    position:relative;

    min-width:0;
    height:45px;

    overflow:hidden;

    display:flex;
    align-items:center;

    padding: 13px 0px 13px 1px;

    border:
        1px solid
        var(--cs-store-border);

    border-radius:15px;

    background:
        linear-gradient(
            180deg,
            rgba(8,20,40,.96),
            rgba(5,14,28,.99)
        );

    color:#eef5ff;

    text-align:left;

    cursor:pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 8px 22px rgba(0,0,0,.22),
        0 0 18px var(--cs-store-soft);

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}



/* Soft light inside the upper part of card */

/* =====================================================
   BOTTOM MOVING LED
   Same as top LED, but starts later
===================================================== */

.cs-store-card::before{

    content:"";

    position:absolute;

    left:-72px;
    bottom:-1px;

    width:72px;
    height:2px;

    background:
        var(--cs-store-accent);

    opacity:.95;

    pointer-events:none;

    z-index:5;

    animation:
        csStoreLedSweep
        4.4s
        linear
        infinite;

    animation-delay:.55s;
}

/* =====================================================
   MOVING LED BORDER LIGHT
===================================================== */

.cs-store-card::after{

    content:"";

    position:absolute;

    left:-72px;
    top:-1px;

    width:72px;
    height:2px;

    background:
        var(--cs-store-accent);

    opacity:.95;

    pointer-events:none;

    z-index:5;

    animation:
        csStoreLedSweep
        4.4s
        linear
        infinite;
}


/* =====================================================
   PLATFORM COLOURS
===================================================== */

.cs-store-card.shopify{
    --cs-store-accent:#3de1a1;
    --cs-store-soft:rgba(61,225,161,.16);
    --cs-store-border:rgba(61,225,161,.42);
}


.cs-store-card.amazon{
    --cs-store-accent:#ffbf4a;
    --cs-store-soft:rgba(255,191,74,.16);
    --cs-store-border:rgba(255,191,74,.42);
}


.cs-store-card.ebay{
    --cs-store-accent:#78afff;
    --cs-store-soft:rgba(120,175,255,.16);
    --cs-store-border:rgba(120,175,255,.42);
}


.cs-store-card.neshome{
    --cs-store-accent:#b487ff;
    --cs-store-soft:rgba(180,135,255,.16);
    --cs-store-border:rgba(180,135,255,.42);
}


.cs-store-card.bnq{
    --cs-store-accent:#ff7b98;
    --cs-store-soft:rgba(255,123,152,.16);
    --cs-store-border:rgba(255,123,152,.42);
}


.cs-store-card.onbuy{
    --cs-store-accent:#64d9ff;
    --cs-store-soft:rgba(100,217,255,.16);
    --cs-store-border:rgba(100,217,255,.42);
}


.cs-store-card.manob2b{
    --cs-store-accent:#7fe89c;
    --cs-store-soft:rgba(127,232,156,.16);
    --cs-store-border:rgba(127,232,156,.42);
}


.cs-store-card.manob2c{
    --cs-store-accent:#ff9d66;
    --cs-store-soft:rgba(255,157,102,.16);
    --cs-store-border:rgba(255,157,102,.42);
}


/* =====================================================
   CONTENT
===================================================== */

.cs-store-head{

    position:relative;
    z-index:2;

    width:100%;

    display:flex;
    align-items:center;

    gap:10px;

    min-width:0;
}


.cs-store-badge{

    width:34px;
    height:34px;

    flex:
        0 0
        34px;

    display:grid;
    place-items:center;

    border:
        1px solid
        var(--cs-store-accent);

    border-radius:10px;

    background:
        rgba(6,17,30,.82);

    color:
        var(--cs-store-accent);

    font-size:14px;
    font-weight:900;
}


.cs-store-name{

    min-width:0;

    overflow:hidden;

    color:#eef5ff;

    font-size:12px;
    font-weight:850;

    line-height:1.2;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =====================================================
   HOVER
===================================================== */

.cs-store-card:hover{

    border-color:
        var(--cs-store-accent);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 9px 24px rgba(0,0,0,.24),
        0 0 24px var(--cs-store-soft);

    transform:none !important;
}


/* =====================================================
   SELECTED STORE
===================================================== */

.cs-store-card.selected{

    border-color:
        var(--cs-store-accent);

    background:
        var(--cs-store-soft);

    box-shadow:
        inset 0 0 0 1px
            var(--cs-store-accent),

        0 0 8px
            var(--cs-store-soft),

        0 0 18px
            var(--cs-store-soft);
}


.cs-store-card.selected
.cs-store-name{

    color:#ffffff;
}


.cs-store-card.selected
.cs-store-badge{

    background:
        var(--cs-store-soft);

    box-shadow:
        0 0 15px
        var(--cs-store-soft);
}


.cs-store-card:focus-visible{

    outline:
        2px solid
        var(--cs-store-accent);

    outline-offset:3px;
}


/* =====================================================
   LED SWEEP DELAYS
===================================================== */

.cs-store-card:nth-child(2)::after{
    animation-delay:.4s;
}

.cs-store-card:nth-child(3)::after{
    animation-delay:.8s;
}

.cs-store-card:nth-child(4)::after{
    animation-delay:1.2s;
}

.cs-store-card:nth-child(5)::after{
    animation-delay:1.6s;
}

.cs-store-card:nth-child(6)::after{
    animation-delay:2.0s;
}

.cs-store-card:nth-child(7)::after{
    animation-delay:2.4s;
}

.cs-store-card:nth-child(8)::after{
    animation-delay:2.8s;
}



/* =====================================================
   BOTTOM LED DELAYS
   0.55s later than each top LED
===================================================== */

.cs-store-card:nth-child(1)::before{
    animation-delay:1.2s;
}

.cs-store-card:nth-child(2)::before{
    animation-delay:1.6s;
}

.cs-store-card:nth-child(3)::before{
    animation-delay:2.0s;
}

.cs-store-card:nth-child(4)::before{
    animation-delay:2.4s;
}

.cs-store-card:nth-child(5)::before{
    animation-delay:2.8s;
}

.cs-store-card:nth-child(6)::before{
    animation-delay:3.2s;
}

.cs-store-card:nth-child(7)::before{
    animation-delay:3.6s;
}

.cs-store-card:nth-child(8)::before{
    animation-delay:4.0s;
}


/* =====================================================
   LED SWEEP ANIMATION
===================================================== */

@keyframes csStoreLedSweep{

    0%{
        left:-72px;
        opacity:0;
    }

    8%{
        opacity:.95;
    }

    82%{
        opacity:.95;
    }

    100%{
        left:calc(100% + 2px);
        opacity:0;
    }
}




/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1180px){

    .cs-store-strip{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }
}


@media(max-width:760px){

    .cs-store-strip{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


@media(max-width:480px){

    .cs-store-strip{
        grid-template-columns:1fr;
    }
}


.cs-store-head{
    display:flex;
    align-items:center;

    gap:12px;
}


.cs-store-badge{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    border:
        1px solid
        var(--cs-store-accent);

    border-radius:11px;

    background:#09131e;

    color:
        var(--cs-store-accent);

    font-size:18px;
    font-weight:900;
}


.cs-store-name{
    min-width:0;

    overflow:hidden;

    color:#f0f5fb;

    font-size:16px;
    font-weight:850;

    text-overflow:ellipsis;
    white-space:nowrap;
}


.cs-store-action{
    display:flex;
    align-items:center;

    min-height:24px;

    color:#77889d;

    font-size:10px;
    font-weight:750;
}


.cs-store-card.selected
.cs-store-action{
    color:
        var(--cs-store-accent);
}




/* =====================================================
   CUSTOMER SERVICE — MAIN LAYOUT
===================================================== */

.cs-workspace-grid{
    grid-template-columns:
        minmax(0,1.35fr)
        minmax(500px,.95fr);

    align-items:start;
}


.cs-right-stack{
    gap:14px;
}


body[data-page="customer-service"]
.calculator{
    min-width:0;
}


body[data-page="customer-service"]
.platform-comparison-card{
    min-height:0;
}


/* =====================================================
   CUSTOMER SERVICE — DISCOUNT APPROVAL
===================================================== */

.cs-discount-card{
    padding:17px;
}


.cs-discount-store-line{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    margin-bottom:13px;

    padding:12px 13px;

    border:
        1px solid
        #22364b;

    border-radius:11px;

    background:#09131e;
}


.cs-discount-label{
    display:block;

    margin-bottom:4px;

    color:#72849b;

    font-size:9px;
    font-weight:850;

    letter-spacing:.10em;
    text-transform:uppercase;
}


.cs-discount-store-line strong{
    color:#edf4fc;

    font-size:12px;
}


.cs-current-store-price{
    min-width:118px;

    text-align:right;
}


.cs-current-store-price span{
    display:block;

    margin-bottom:4px;

    color:#72849b;

    font-size:9px;
    font-weight:800;
}


.cs-current-store-price strong{
    color:#dce9f8;

    font-size:18px;
    font-weight:900;
}


.cs-base-thresholds{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:8px;

    margin-bottom:13px;
}


.cs-threshold{
    min-width:0;

    padding:10px 11px;

    border:
        1px solid
        #26384c;

    border-radius:10px;

    background:#09121c;
}


.cs-threshold span{
    display:block;

    margin-bottom:5px;

    color:#7d8da1;

    font-size:9px;
    font-weight:800;
}


.cs-threshold strong{
    display:block;

    color:#edf4fc;

    font-size:14px;
    font-weight:900;
}


.cs-threshold.low{
    border-color:#6e3140;
}


.cs-threshold.low strong{
    color:#ff8998;
}


.cs-threshold.medium{
    border-color:#64511d;
}


.cs-threshold.medium strong{
    color:#f0cf78;
}


.cs-threshold.high{
    border-color:#285078;
}


.cs-threshold.high strong{
    color:#8fc4ff;
}


.cs-discount-mode{

    position:relative;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:0;

    margin-bottom:14px;

    padding:4px;

    overflow:hidden;

    border:
        1px solid
        #26394d;

    border-radius:14px;

    background:#07101a;

    isolation:isolate;

}


/*
 * Sliding selected-mode plate
 */
.cs-discount-mode::before{

    content:"";

    position:absolute;

    top:4px;
    bottom:4px;
    left:4px;

    width:
        calc(
            (100% - 8px) /
            2
        );

    border:
        1px solid
        #3b6d98;

    border-radius:10px;

    background:#10263a;

    z-index:0;

    transition:
        transform .22s
        cubic-bezier(.2,.8,.2,1),
        border-color .18s ease,
        background-color .18s ease;

}


.cs-discount-mode[data-mode="pound"]::before{

    transform:
        translateX(100%);

    border-color:#765f27;

    background:#2a2312;

}


.cs-discount-mode-button{

    position:relative;

    z-index:1;

    min-width:0;
    height:54px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:
        7px
        12px;

    border:0;

    border-radius:10px;

    background:transparent;

    color:#70849a;

    text-align:left;

    cursor:pointer;

    box-shadow:none;

    transition:
        color .18s ease;

}


.cs-discount-mode-button:hover{

    transform:none !important;

    color:#c7d5e4;

}


.cs-discount-mode-icon{

    width:30px;
    height:30px;

    flex:0 0 30px;

    display:grid;
    place-items:center;

    border:
        1px solid
        #31465c;

    border-radius:8px;

    background:#09131e;

    color:#7f94aa;

    font-size:14px;
    font-weight:950;

    transition:
        border-color .18s ease,
        color .18s ease,
        background-color .18s ease;

}


.cs-discount-mode-copy{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:2px;

}


.cs-discount-mode-copy strong{

    color:inherit;

    font-size:11px;
    font-weight:900;

    line-height:1.1;

}


.cs-discount-mode-copy small{

    color:#65778c;

    font-size:8px;
    font-weight:700;

    white-space:nowrap;

}


.cs-discount-mode-button.active{

    color:#b8dcff;

}


.cs-discount-mode-button.active
.cs-discount-mode-icon{

    border-color:#4b83b4;

    background:#0b1927;

    color:#8fc8ff;

}


.cs-discount-mode[data-mode="pound"]
.cs-discount-mode-button.active{

    color:#f4ce72;

}


.cs-discount-mode[data-mode="pound"]
.cs-discount-mode-button.active
.cs-discount-mode-icon{

    border-color:#806823;

    background:#18150b;

    color:#ffcf62;

}


.cs-discount-entry{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:end;

    gap:9px;

    margin-bottom:13px;
}


.cs-discount-field{
    min-width:0;
}


.cs-discount-input-shell{
    position:relative;
}


.cs-discount-input-shell
.input{

    padding-right:42px;

}


.cs-discount-input-shell.pound-mode
.input{

    padding-left:58px;
    padding-right:14px;

}


.cs-discount-input-shell
span{

    position:absolute;

    top:50%;
    right:13px;

    transform:
        translateY(-50%);

    color:#8293a8;

    font-size:11px;
    font-weight:900;

    pointer-events:none;

}


.cs-discount-input-shell.pound-mode
span{

    left:14px;
    right:auto;

    color:#ffbf4a;

    letter-spacing:.03em;

}


.cs-discount-check-button{
    height:42px;

    padding:
        0
        16px;

    border:
        1px solid
        #6f5717;

    border-radius:9px;

    background:#211a09;

    color:#f0cf75;

    cursor:pointer;

    font-size:11px;
    font-weight:900;

    box-shadow:none;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.cs-discount-check-button:hover{
    transform:none !important;

    border-color:#907322;

    background:#2a220d;

    color:#ffe59d;
}


.cs-discount-result{
    min-height:112px;

    display:flex;
    align-items:flex-start;

    gap:12px;

    padding:13px;

    border:
        1px solid
        #283a4e;

    border-radius:11px;

    background:#09121c;
}


.cs-discount-result-icon{
    width:34px;
    height:34px;

    flex:0 0 34px;

    display:grid;
    place-items:center;

    border:
        1px solid
        #36506d;

    border-radius:9px;

    background:#0b1520;

    color:#91a8c0;

    font-size:14px;
    font-weight:900;
}


.cs-discount-result > div:last-child{
    min-width:0;

    flex:1;
}


.cs-discount-result strong{
    display:block;

    margin-top:1px;

    color:#dce6f2;

    font-size:12px;
    font-weight:900;
}


.cs-discount-result p{
    margin:
        5px
        0
        0;

    color:#7c8b9f;

    font-size:10px;
    line-height:1.55;
}


.cs-discount-result.approved{
    border-color:#27664f;

    background:#0a1b16;
}


.cs-discount-result.approved
.cs-discount-result-icon{
    border-color:#318063;

    color:#73e5b5;
}


.cs-discount-result.approved
strong{
    color:#86e8bf;
}


.cs-discount-result.rejected{
    border-color:#743742;

    background:#1b0e12;
}


.cs-discount-result.rejected
.cs-discount-result-icon{
    border-color:#8c4350;

    color:#ff8d9b;
}


.cs-discount-result.rejected
strong{
    color:#ff9ca8;
}


.cs-discount-result.alert{
    border-color:#796020;

    background:#1a160b;
}


.cs-discount-result.alert
.cs-discount-result-icon{
    border-color:#8f7325;

    color:#f3ce72;
}


.cs-discount-result.alert
strong{
    color:#f3d78e;
}


.cs-discount-result-details{
    display:grid;

    gap:5px;

    margin-top:9px;
}


.cs-discount-detail{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:
        7px
        9px;

    border:
        1px solid
        #203145;

    border-radius:8px;

    background:#08111a;

    color:#75869a;

    font-size:9px;
}


.cs-discount-detail b{
    color:#d6e2ef;

    font-size:10px;
}


.cs-discount-base-pill{
    display:inline-flex;
    align-items:center;

    margin-top:8px;

    padding:
        4px
        7px;

    border:
        1px solid
        #344a61;

    border-radius:7px;

    background:#0a141f;

    color:#9cb0c5;

    font-size:9px;
    font-weight:850;
}


/* =====================================================
   CUSTOMER SERVICE — HARD NO HOVER MOVEMENT
===================================================== */

body[data-page="customer-service"]
.parent-find-btn:hover,

body[data-page="customer-service"]
.base-choice:hover,

body[data-page="customer-service"]
.base-adjust-button:hover,

body[data-page="customer-service"]
.ghost-btn:hover,

body[data-page="customer-service"]
.primary-btn:hover{
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1320px){

    .cs-store-strip{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }


    .cs-workspace-grid{
        grid-template-columns:1fr;
    }
}


@media(max-width:900px){

    .cs-store-strip{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .cs-discount-entry{
        grid-template-columns:1fr;
    }


    .cs-discount-check-button{
        width:100%;
    }
}


@media(max-width:620px){

    .cs-store-strip{
        grid-template-columns:1fr;
    }


    .cs-base-thresholds{
        grid-template-columns:1fr;
    }


    .cs-discount-store-line{
        align-items:flex-start;
        flex-direction:column;
    }


    .cs-current-store-price{
        text-align:left;
    }
}

/* =====================================================
   CUSTOMER SERVICE — LIVE SHOPIFY SELLING PRICE
===================================================== */
body[data-page="customer-service"]
.parent-product-summary{

    position:relative;
}


body[data-page="customer-service"]
.parent-product-summary-content{

    position:static;

    padding-right:0;
}


body[data-page="customer-service"]
.cs-parent-shopify-price{

    position:absolute;

    top:28px;
    right:28px;

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:5px;

    text-align:right;

    z-index:2;
}


body[data-page="customer-service"]
.cs-parent-shopify-price span{
    color:#8193ac;

    font-size:10px;
    font-weight:800;

    letter-spacing:.10em;
    text-transform:uppercase;
}


body[data-page="customer-service"]
.cs-parent-shopify-price strong{
    color:#3de1a1;

    font-size:23px;
    font-weight:900;
}


body[data-page="customer-service"]
.price-table th:nth-child(7),

body[data-page="customer-service"]
.price-table td:nth-child(7){
    text-align:right !important;
}


body[data-page="customer-service"]
.cs-shopify-selling-price{
    color:#3de1a1;
    font-weight:850;
}


/* =====================================================
   CUSTOMER SERVICE — COMPACT DISCOUNT RESULT
===================================================== */

.cs-discount-result-compact[hidden]{
    display:none !important;
}


.cs-discount-result-compact{

    margin-top:12px;

    min-height:0;

    padding:12px 14px;

    display:grid;

    grid-template-columns:
        34px
        minmax(0,1fr);

    gap:12px;

    align-items:start;

    border:
        1px solid
        #294158;

    border-radius:12px;

    background:
        rgba(7,18,29,.82);
}


.cs-discount-result-compact
.cs-discount-result-icon{

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        #35516c;

    border-radius:9px;

    font-size:16px;
    font-weight:900;
}


.cs-discount-result-compact strong{

    display:block;

    margin-bottom:4px;

    font-size:13px;
    font-weight:900;
}


.cs-discount-result-compact p{

    margin:0;

    color:#91a4ba;

    font-size:11px;
    line-height:1.45;
}


/* =====================================================
   APPROVED
===================================================== */

.cs-discount-result-compact.approved{

    border-color:
        rgba(61,225,161,.42);

    background:
        rgba(61,225,161,.055);
}


.cs-discount-result-compact.approved
.cs-discount-result-icon,

.cs-discount-result-compact.approved strong{

    color:#3de1a1;
}


/* =====================================================
   REJECTED
===================================================== */

.cs-discount-result-compact.rejected{

    border-color:
        rgba(255,91,115,.48);

    background:
        rgba(255,91,115,.055);
}


.cs-discount-result-compact.rejected
.cs-discount-result-icon,

.cs-discount-result-compact.rejected strong{

    color:#ff6f86;
}


/* =====================================================
   ALERT
===================================================== */

.cs-discount-result-compact.alert{

    border-color:
        rgba(240,199,97,.45);

    background:
        rgba(240,199,97,.055);
}


.cs-discount-result-compact.alert
.cs-discount-result-icon,

.cs-discount-result-compact.alert strong{

    color:#f0c761;
}


/* =====================================================
   DETAIL VALUES
===================================================== */

.cs-discount-result-compact
.cs-discount-result-details{

    margin-top:9px;

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:7px;
}


.cs-discount-result-compact
.cs-discount-detail{

    padding:7px 9px;

    border:
        1px solid
        rgba(92,121,151,.24);

    border-radius:8px;

    background:
        rgba(5,14,23,.40);

    display:flex;
    flex-direction:column;

    gap:2px;
}


.cs-discount-result-compact
.cs-discount-detail span{

    color:#748ba4;

    font-size:9px;
    font-weight:750;
}


.cs-discount-result-compact
.cs-discount-detail b{

    color:#e7eef7;

    font-size:11px;
    font-weight:850;
}

/* =====================================================
   CUSTOMER SERVICE — PARENT PRODUCT VISIBILITY
===================================================== */

body[data-page="customer-service"]
.parent-product-summary[hidden]{

    display:none !important;
}

/* =====================================================
   WEIGHTED BASE RATE COLUMNS
===================================================== */

.rate-head-label{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:120px;

  height:28px;

  padding:
    0
    10px;

  border-radius:8px;

  white-space:nowrap;

  transition:
    min-width .18s ease,
    background-color .18s ease,
    color .18s ease;

}


.rate-head-short{

  display:block;

}


.rate-head-full{

  display:none;

}


/* Expand wording on hover */

.rate-head-label:hover{

  min-width:190px;

}


.rate-head-label:hover
.rate-head-short{

  display:none;

}


.rate-head-label:hover
.rate-head-full{

  display:block;

}



/* =====================================================
   CATEGORY RATE SEARCH
===================================================== */

.category-search-shell{

  position:relative;

  display:flex;

  align-items:center;

  width:100%;

  max-width:520px;

  margin:
    0
    0
    14px;

}


.category-search-icon{

  position:absolute;

  left:16px;

  z-index:2;

  color:#7190ad;

  font-size:17px;

  pointer-events:none;

}


.category-rate-search{

  width:100%;

  height:44px;

  padding:
    0
    46px;

  border:
    1px solid
    #29445d;

  border-radius:11px;

  outline:none;

  background:#091521;

  color:#edf5ff;

  font:inherit;

  transition:
    border-color .16s ease,
    box-shadow .16s ease;

}


.category-rate-search::placeholder{

  color:#688097;

}


.category-rate-search:focus{

  border-color:#4c90c8;

  box-shadow:
    0
    0
    0
    2px
    rgba(
      76,
      144,
      200,
      .10
    );

}


.category-search-clear{

  position:absolute;

  right:10px;

  width:28px;

  height:28px;

  border:0;

  border-radius:7px;

  background:transparent;

  color:#8199ad;

  font-size:20px;

  cursor:pointer;

}


.category-search-clear:hover{

  background:#142334;

  color:#ffffff;

}


.category-search-empty{

  padding:34px !important;

  text-align:center !important;

  color:#7f94a8;

}



/* =====================================================
   PRICE SETTING — PERSISTENCE / SORT / FILL / COMPARISON
===================================================== */

.category-table-tools{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
}

.category-table-tools .category-search-shell{
  flex:1 1 520px;
  margin:0;
}

.category-sort-button{
  height:44px;
  min-width:88px;
  padding:0 14px;
  border:1px solid #29445d;
  border-radius:10px;
  background:#091521;
  color:#b9cce0;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}

.category-sort-button:hover{
  border-color:#4c90c8;
  color:#ffffff;
}

.rate-input-with-fill{
  position:relative;
  width:max-content;
  margin:0 auto;
}

.rate-fill-handle{
  position:absolute;
  right:-4px;
  bottom:-4px;

  width:10px;
  height:10px;

  padding:0;

  border:
    1px solid
    #7dbaff;

  border-radius:2px;

  background:#4da3ff;

  cursor:crosshair;
  touch-action:none;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .12s ease,
    visibility .12s ease;
}


.rate-input-with-fill:focus-within
.rate-fill-handle{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.rate-input.fill-preview{
  border-color:#4da3ff;
  background:#0d1926;
}

.save-button:disabled{
  opacity:.55;
  cursor:wait;
}

.comparison-panel-heading{
  align-items:flex-start;
}

.comparison-auto-state{
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid #29415c;
  border-radius:9px;
  background:#0a131e;
  color:#88a1ba;
  font-size:10px;
  font-weight:800;
}

.comparison-toolbar{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin:14px 0 10px;
  flex-wrap:wrap;
}

.comparison-filter-field,
.comparison-rate-filter-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.comparison-filter-field{
  min-width:260px;
  flex:1 1 300px;
}

.comparison-filter-field label,
.comparison-filter-label{
  color:#6f86a0;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.comparison-filter-field select{
  height:38px;
  width:100%;
  padding:0 34px 0 11px;
  border:1px solid #29445d;
  border-radius:9px;
  outline:none;
  background:#091521;
  color:#e7eef7;
  font-size:11px;
  font-weight:750;
}

.comparison-rate-filter-buttons{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.comparison-rate-filter-button,
.comparison-clear-filters{
  height:38px;
  padding:0 11px;
  border:1px solid #29445d;
  border-radius:9px;
  background:#091521;
  color:#8fa4b8;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}

.comparison-rate-filter-button:hover,
.comparison-clear-filters:hover{
  border-color:#4c90c8;
  color:#ffffff;
}

.comparison-rate-filter-button.active{
  border-color:#4da3ff;
  background:#102033;
  color:#ffffff;
}

.comparison-clear-filters{
  margin-left:auto;
}

.comparison-current-context{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  margin:0 0 12px;
  padding:8px 10px;
  border:1px solid #1c2b3c;
  border-radius:9px;
  background:#09111b;
  color:#70849a;
  font-size:10px;
}

.comparison-current-context strong{
  color:#dce8f5;
  font-size:11px;
}

.comparison-current-context b{
  color:#3c5169;
}

.comparison-card.missing-rate .comparison-rate-value{
  color:#5f7184;
}

.comparison-card .comparison-rate-label{
  min-height:24px;
}

@media (max-width:900px){

  .category-table-tools{
    align-items:stretch;
  }

  .category-sort-button{
    min-width:76px;
  }

  .comparison-toolbar{
    align-items:stretch;
  }

  .comparison-filter-field,
  .comparison-rate-filter-group{
    flex:1 1 100%;
  }

  .comparison-clear-filters{
    margin-left:0;
  }

}


/* =====================================================
   PRICE SETTING — COMPACT STORE COMPARISON
===================================================== */

.comparison-grid{
  grid-template-columns:
    repeat(8,minmax(0,1fr));

  gap:8px;
}


.comparison-card{
  min-height:0;

  padding:
    10px
    11px;
}


.comparison-head{
  gap:7px;
}


.comparison-badge{
  width:28px;
  height:28px;

  flex:0 0 28px;

  border-radius:7px;

  font-size:10px;
}


.comparison-head strong{
  overflow:hidden;

  font-size:11px;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.comparison-rate-label{
  min-height:0 !important;

  margin-top:9px;

  font-size:8px;
}


.comparison-rate-value{
  margin-top:2px;

  font-size:19px;
  line-height:1.1;
}


.comparison-current-context{
  min-height:28px;

  margin-bottom:8px;

  padding:
    5px
    9px;
}


.comparison-toolbar{
  margin:
    10px
    0
    8px;
}


@media(max-width:1400px){

  .comparison-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }

}


@media(max-width:900px){

  .comparison-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:560px){

  .comparison-grid{
    grid-template-columns:1fr;
  }

}

/* =====================================================
   COMPARISON CATEGORY SEARCH
===================================================== */

.comparison-category-search{
  width:100%;
  height:38px;

  padding:
    0
    12px;

  border:
    1px solid
    #29445d;

  border-radius:9px;

  outline:none;

  background:#091521;

  color:#e7eef7;

  font-size:11px;
  font-weight:750;
}


.comparison-category-search::placeholder{
  color:#688097;
}


.comparison-category-search:focus{
  border-color:#4c90c8;

  box-shadow:
    0
    0
    0
    2px
    rgba(
      76,
      144,
      200,
      .10
    );
}


.comparison-category-search::-webkit-search-cancel-button{
  cursor:pointer;
}

/* =====================================================
   CUSTOMER SERVICE — SHOPIFY VIEW PRODUCT
===================================================== */

body[data-page="customer-service"]
.price-table th:nth-child(8),

body[data-page="customer-service"]
.price-table td:nth-child(8){
    text-align:right !important;
    white-space:nowrap;
}


body[data-page="customer-service"]
.cs-product-link-heading{
    color:#3de1a1;
}


body[data-page="customer-service"]
.cs-product-link-cell{
    width:112px;
}


body[data-page="customer-service"]
.cs-view-product-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:88px;
    height:30px;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(61,225,161,.48);

    border-radius:8px;

    background:
        rgba(61,225,161,.08);

    color:#67e6b3;

    font-size:10px;
    font-weight:850;

    line-height:1;

    text-decoration:none;

    cursor:pointer;
}


body[data-page="customer-service"]
.cs-view-product-button:hover{
    border-color:#3de1a1;

    background:
        rgba(61,225,161,.13);

    color:#ffffff;

    transform:none !important;
}


body[data-page="customer-service"]
.cs-view-product-unavailable{
    color:#53677d;

    font-size:13px;
    font-weight:800;
}

/* =====================================================
   CUSTOMER SERVICE — PLATFORM LOGOS
===================================================== */

/* -----------------------------------------------------
   SMALL LOGOS — TOP STORE SELECTOR
----------------------------------------------------- */

.cs-store-card.shopify{
    --platform-logo-small:
        url("/static/assets/platform-logos/bathroom-republic-small.jpg");
}

.cs-store-card.amazon{
    --platform-logo-small:
        url("/static/assets/platform-logos/amazon-small.jpg");
}

.cs-store-card.ebay{
    --platform-logo-small:
        url("/static/assets/platform-logos/ebay-small.jpg");
}

.cs-store-card.neshome{
    --platform-logo-small:
        url("/static/assets/platform-logos/neshome-small.jpg");
}

.cs-store-card.bnq{
    --platform-logo-small:
        url("/static/assets/platform-logos/bnq-small.jpg");
}

.cs-store-card.onbuy{
    --platform-logo-small:
        url("/static/assets/platform-logos/onbuy-small.jpg");
}

.cs-store-card.manob2b,
.cs-store-card.manob2c{
    --platform-logo-small:
        url("/static/assets/platform-logos/manomano-small.jpg");
}


.cs-store-badge{

    color:
        transparent !important;

    font-size:
        0 !important;

    background-color:
        #ffffff !important;

    background-image:
        var(
            --platform-logo-small
        ) !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        contain !important;

    overflow:
        hidden;
}


/*
 * OnBuy artwork contains extra whitespace.
 * Slight enlargement keeps the visible logo
 * similar in size to the others.
 */
.cs-store-card.onbuy
.cs-store-badge,

.cs-store-card.onbuy.selected
.cs-store-badge{

    background-size:
        130% !important;

    background-position:
        center center !important;

    transform:
        none !important;
}


/* -----------------------------------------------------
   LONG LOGO — CALCULATOR HEADER
----------------------------------------------------- */

body[data-page="customer-service"]
.calculator
.panel-title{

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


body[data-page="customer-service"]
.calculator
.cs-calculator-brand-logo{

    position:
        static;

    display:
        block;

    flex:
        0 0 auto;

    width:
        150px;

    height:
        56px;

    background-image:
        url(
            "/static/assets/platform-logos/bathroom-republic-long.jpg"
        );

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        contain;

    pointer-events:
        none;
}


/* -----------------------------------------------------
   LONG LOGO — PARENT PRODUCT
----------------------------------------------------- */

.cs-selected-store-logo{

    position:
        relative;

    display:
        block;

    width:
        112px;

    height:
        42px;

    padding:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(126,154,184,.35);

    border-radius:
        7px;

    background-color:
        #ffffff;

    background-image:
        url(
            "/static/assets/platform-logos/bathroom-republic-long.jpg"
        );

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        contain;

    cursor:
        pointer;

    pointer-events:
        auto;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.cs-selected-store-logo:hover,
.cs-selected-store-logo:focus-visible{

    border-color:
        var(
            --selected-store-accent,
            #5fdcff
        );

    outline:
        none;
}

.cs-selected-store-logo::after{

    content:
        "Visit store ↗";

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            7,
            16,
            26,
            .91
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .02em;

    opacity:
        0;

    transform:
        translateX(
            -100%
        );

    transition:
        transform .20s ease,
        opacity .16s ease;

    pointer-events:
        none;
}


.cs-selected-store-logo:hover::after,
.cs-selected-store-logo:focus-visible::after{

    opacity:
        1;

    transform:
        translateX(
            0
        );
}
.parent-product-summary
.cs-selected-store-logo{

    position:
        absolute;

    top:
        86px;

    right:
        28px;

    margin:
        0 !important;

    z-index:
        2;
}

/* =====================================================
   PLATFORM PRICE COMPARISON — SMALL STORE LOGOS
===================================================== */

.platform-store-mark{

    color:
        transparent !important;

    font-size:
        0 !important;

    background-color:
        #ffffff !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        contain !important;

    overflow:
        hidden;
}


/* BR Shopify */

.platform-store-mark.shopify{

    background-image:
        url(
            "/static/assets/platform-logos/bathroom-republic-small.jpg"
        ) !important;
}


/* BR Amazon */

.platform-store-mark.amazon{

    background-image:
        url(
            "/static/assets/platform-logos/amazon-small.jpg"
        ) !important;
}


/* BR Ebay */

.platform-store-mark.ebay{

    background-image:
        url(
            "/static/assets/platform-logos/ebay-small.jpg"
        ) !important;
}


/* Neshome */

.platform-store-mark.neshome{

    background-image:
        url(
            "/static/assets/platform-logos/neshome-small.jpg"
        ) !important;
}


/* BR B&Q */

.platform-store-mark.bnq{

    background-image:
        url(
            "/static/assets/platform-logos/bnq-small.jpg"
        ) !important;
}


/* OnBuy BR */

.platform-store-mark.onbuy{

    background-image:
        url(
            "/static/assets/platform-logos/onbuy-small.jpg"
        ) !important;

    /*
     * OnBuy artwork has more empty space,
     * so enlarge slightly inside the same box.
     */
    background-size:
        125% !important;
}


/* ManoMano B2B + B2C */

.platform-store-mark.manob2b,
.platform-store-mark.manob2c{

    background-image:
        url(
            "/static/assets/platform-logos/manomano-small.jpg"
        ) !important;
}


/* =====================================================
   PLATFORM PRICE COMPARISON — LED LOGO FRAMES
===================================================== */

.platform-store-mark{

    --platform-led:#4da3ff;

    position:relative;

  border:
      2px solid
      var(--platform-led) !important;

    border-radius:
        7px !important;

    box-shadow:
        none !important;
}


/* SHOPIFY */

.platform-store-mark.shopify{
    --platform-led:#3de1a1;
}


/* AMAZON */

.platform-store-mark.amazon{
    --platform-led:#ffbf4a;
}


/* EBAY */

.platform-store-mark.ebay{
    --platform-led:#78afff;
}


/* NESHOME */

.platform-store-mark.neshome{
    --platform-led:#b487ff;
}


/* B&Q */

.platform-store-mark.bnq{
    --platform-led:#ff7b98;
}


/* ONBUY */

.platform-store-mark.onbuy{
    --platform-led:#5fdcff;
}


/* MANOMANO B2B */

.platform-store-mark.manob2b{
    --platform-led:#63d89a;
}


/* MANOMANO B2C */

.platform-store-mark.manob2c{
    --platform-led:#ff9966;
}


/* =====================================================
   PRICE SETTING — STORE LANDING PLATFORM LOGOS
===================================================== */


/* Remove old moving LED line */
#storeLandingPage
.store-card
.card-led{

    display:none !important;
}


/* =====================================================
   MAIN STORE ICON
   Use SMALL artwork, but display it larger
===================================================== */

#storeLandingPage
.store-card
.store-badge{

    width:80px;

    height:80px;

    flex:
        0 0 80px;

    display:block;

    color:
        transparent !important;

    font-size:
        0 !important;

    border:
        2px solid
        var(--accent) !important;

    border-radius:
        16px !important;

    background-color:
        #ffffff !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        contain !important;

    box-shadow:
        none !important;

    overflow:hidden;
}


/* BR SHOPIFY */

#storeLandingPage
.store-card.shopify
.store-badge{

    background-image:
        url(
            "/static/assets/platform-logos/bathroom-republic-small.jpg"
        ) !important;
}


/* AMAZON */

#storeLandingPage
.store-card.amazon
.store-badge{

    background-image:
        url(
            "/static/assets/platform-logos/amazon-small.jpg"
        ) !important;
}


/* EBAY */

#storeLandingPage
.store-card.ebay
.store-badge{

    background-image:
        url(
            "/static/assets/platform-logos/ebay-small.jpg"
        ) !important;
}


/* NESHOME */

#storeLandingPage
.store-card.neshome
.store-badge{

    background-image:
        url(
            "/static/assets/platform-logos/neshome-small.jpg"
        ) !important;
}


/* B&Q */

#storeLandingPage
.store-card.bnq
.store-badge{

    background-image:
        url(
            "/static/assets/platform-logos/bnq-small.jpg"
        ) !important;
}


/* ONBUY */

#storeLandingPage
.store-card.onbuy
.store-badge{

    background-image:
        url(
            "/static/assets/platform-logos/onbuy-small.jpg"
        ) !important;
}


/* MANOMANO B2B + B2C */

#storeLandingPage
.store-card.manob2b
.store-badge,

#storeLandingPage
.store-card.manob2c
.store-badge{

    background-image:
        url(
            "/static/assets/platform-logos/manomano-small.jpg"
        ) !important;
}


/* =====================================================
   REMOVE EXTRA ICON ABOVE GREY DIVIDER
===================================================== */

#storeLandingPage
.store-card
.store-card-footer::before{

    content:none !important;

    display:none !important;
}
/* =====================================================
   PRICE SETTING PAGE — BIG HEADER LOGO + SMALL BANNERS
===================================================== */


/* -----------------------------------------------------
   1) TOP CURRENT STORE BADGE
   Replace S / A / E / N / B / O / M with long logo
----------------------------------------------------- */

.selected-store-badge,
.price-setting-store-badge,
.pricing-store-badge{

    width:180px !important;

    height:72px !important;

    min-width:180px !important;

    border:0 !important;

    border-radius:0 !important;

    background-color:transparent !important;

    background-position:left center !important;

    background-repeat:no-repeat !important;

    background-size:contain !important;

    color:transparent !important;

    font-size:0 !important;

    box-shadow:none !important;
}


/* Current selected store = BR Shopify */
.selected-store-badge.shopify,
.price-setting-store-badge.shopify,
.pricing-store-badge.shopify{

    background-image:
        url("/static/assets/platform-logos/bathroom-republic-long.jpg") !important;
}


/* If the same page is reused for other stores later */
.selected-store-badge.amazon,
.price-setting-store-badge.amazon,
.pricing-store-badge.amazon{

    background-image:
        url("/static/assets/platform-logos/amazon-long.jpg") !important;
}

.selected-store-badge.ebay,
.price-setting-store-badge.ebay,
.pricing-store-badge.ebay{

    background-image:
        url("/static/assets/platform-logos/ebay-long.jpg") !important;
}

.selected-store-badge.neshome,
.price-setting-store-badge.neshome,
.pricing-store-badge.neshome{

    background-image:
        url("/static/assets/platform-logos/neshome-long.jpg") !important;
}

.selected-store-badge.bnq,
.price-setting-store-badge.bnq,
.pricing-store-badge.bnq{

    background-image:
        url("/static/assets/platform-logos/bnq-long.jpg") !important;
}

.selected-store-badge.onbuy,
.price-setting-store-badge.onbuy,
.pricing-store-badge.onbuy{

    background-image:
        url("/static/assets/platform-logos/onbuy-long.jpg") !important;
}

.selected-store-badge.manob2b,
.price-setting-store-badge.manob2b,
.pricing-store-badge.manob2b,
.selected-store-badge.manob2c,
.price-setting-store-badge.manob2c,
.pricing-store-badge.manob2c{

    background-image:
        url("/static/assets/platform-logos/manomano-long.jpg") !important;
}


/* -----------------------------------------------------
   2) ALL STORE RATES BANNERS
   Small logos with LED border only
----------------------------------------------------- */

.platform-rate-card .store-badge,
.rate-card .store-badge,
.comparison-rate-card .store-badge,
.all-store-rate-card .store-badge{

    width:34px !important;

    height:34px !important;

    min-width:34px !important;

    border-radius:8px !important;

    background-color:#ffffff !important;

    background-position:center !important;

    background-repeat:no-repeat !important;

    background-size:contain !important;

    color:transparent !important;

    font-size:0 !important;

    box-shadow:none !important;
}


/* LED border only */
.platform-rate-card.shopify .store-badge,
.rate-card.shopify .store-badge,
.comparison-rate-card.shopify .store-badge,
.all-store-rate-card.shopify .store-badge{

    border:2px solid #3de1a1 !important;
    background-image:url("/static/assets/platform-logos/bathroom-republic-small.jpg") !important;
}

.platform-rate-card.amazon .store-badge,
.rate-card.amazon .store-badge,
.comparison-rate-card.amazon .store-badge,
.all-store-rate-card.amazon .store-badge{

    border:2px solid #ffbf4a !important;
    background-image:url("/static/assets/platform-logos/amazon-small.jpg") !important;
}

.platform-rate-card.ebay .store-badge,
.rate-card.ebay .store-badge,
.comparison-rate-card.ebay .store-badge,
.all-store-rate-card.ebay .store-badge{

    border:2px solid #78afff !important;
    background-image:url("/static/assets/platform-logos/ebay-small.jpg") !important;
}

.platform-rate-card.neshome .store-badge,
.rate-card.neshome .store-badge,
.comparison-rate-card.neshome .store-badge,
.all-store-rate-card.neshome .store-badge{

    border:2px solid #b487ff !important;
    background-image:url("/static/assets/platform-logos/neshome-small.jpg") !important;
}

.platform-rate-card.bnq .store-badge,
.rate-card.bnq .store-badge,
.comparison-rate-card.bnq .store-badge,
.all-store-rate-card.bnq .store-badge{

    border:2px solid #ff7b98 !important;
    background-image:url("/static/assets/platform-logos/bnq-small.jpg") !important;
}

.platform-rate-card.onbuy .store-badge,
.rate-card.onbuy .store-badge,
.comparison-rate-card.onbuy .store-badge,
.all-store-rate-card.onbuy .store-badge{

    border:2px solid #5fdcff !important;
    background-image:url("/static/assets/platform-logos/onbuy-small.jpg") !important;
}

.platform-rate-card.manob2b .store-badge,
.rate-card.manob2b .store-badge,
.comparison-rate-card.manob2b .store-badge,
.all-store-rate-card.manob2b .store-badge{

    border:2px solid #63d89a !important;
    background-image:url("/static/assets/platform-logos/manomano-small.jpg") !important;
}

.platform-rate-card.manob2c .store-badge,
.rate-card.manob2c .store-badge,
.comparison-rate-card.manob2c .store-badge,
.all-store-rate-card.manob2c .store-badge{

    border:2px solid #ff9966 !important;
    background-image:url("/static/assets/platform-logos/manomano-small.jpg") !important;
}

/* =====================================================
   PRICE SETTINGS DETAIL — PLATFORM LOGOS
===================================================== */


/* =====================================================
   TOP SELECTED STORE — LONG LOGO
===================================================== */

.selected-store-badge{

    width:180px !important;

    height:72px !important;

    flex:
        0 0 180px !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background-color:
        transparent !important;

    background-repeat:
        no-repeat !important;

    background-position:
        left center !important;

    background-size:
        contain !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    box-shadow:
        none !important;
}


.selected-store-badge.shopify{

    background-image:
        url(
            "/static/assets/platform-logos/bathroom-republic-long.jpg"
        ) !important;
}


.selected-store-badge.amazon{

    background-image:
        url(
            "/static/assets/platform-logos/amazon-long.jpg"
        ) !important;
}


.selected-store-badge.ebay{

    background-image:
        url(
            "/static/assets/platform-logos/ebay-long.jpg"
        ) !important;
}


.selected-store-badge.neshome{

    background-image:
        url(
            "/static/assets/platform-logos/neshome-long.jpg"
        ) !important;
}


.selected-store-badge.bnq{

    background-image:
        url(
            "/static/assets/platform-logos/bnq-long.jpg"
        ) !important;
}


.selected-store-badge.onbuy{

    background-image:
        url(
            "/static/assets/platform-logos/onbuy-long.jpg"
        ) !important;
}


.selected-store-badge.manob2b,
.selected-store-badge.manob2c{

    background-image:
        url(
            "/static/assets/platform-logos/manomano-long.jpg"
        ) !important;
}


/* =====================================================
   ALL STORE RATE CARDS — SMALL LOGOS
===================================================== */

.comparison-card
.comparison-badge{

    width:35px !important;

    height:35px !important;

    min-width:35px !important;

    display:block !important;

    border:
        2px solid
        var(--accent) !important;

    border-radius:
        9px !important;

    background-color:
        #ffffff !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        contain !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    box-shadow:
        none !important;
}


/* Shopify */

.comparison-card.shopify
.comparison-badge{

    background-image:
        url(
            "/static/assets/platform-logos/bathroom-republic-small.jpg"
        ) !important;
}


/* Amazon */

.comparison-card.amazon
.comparison-badge{

    background-image:
        url(
            "/static/assets/platform-logos/amazon-small.jpg"
        ) !important;
}


/* Ebay */

.comparison-card.ebay
.comparison-badge{

    background-image:
        url(
            "/static/assets/platform-logos/ebay-small.jpg"
        ) !important;
}


/* Neshome */

.comparison-card.neshome
.comparison-badge{

    background-image:
        url(
            "/static/assets/platform-logos/neshome-small.jpg"
        ) !important;
}


/* B&Q */

.comparison-card.bnq
.comparison-badge{

    background-image:
        url(
            "/static/assets/platform-logos/bnq-small.jpg"
        ) !important;
}


/* OnBuy */

.comparison-card.onbuy
.comparison-badge{

    background-image:
        url(
            "/static/assets/platform-logos/onbuy-small.jpg"
        ) !important;
}


/* Mano B2B + B2C */

.comparison-card.manob2b
.comparison-badge,
.comparison-card.manob2c
.comparison-badge{

    background-image:
        url(
            "/static/assets/platform-logos/manomano-small.jpg"
        ) !important;
}

/* =====================================================
   STORE LANDING — GIANT LOGO HOVER WATERMARK
===================================================== */


/* -----------------------------------------------------
   Assign giant hover artwork
----------------------------------------------------- */

/* =====================================================
   GIANT HOVER WATERMARK — LONG PLATFORM LOGOS
===================================================== */

#storeLandingPage
.store-card.shopify{

    --hover-store-logo:
        url(
            "/static/assets/platform-logos/bathroom-republic-long.jpg"
        );
}


#storeLandingPage
.store-card.amazon{

    --hover-store-logo:
        url(
            "/static/assets/platform-logos/amazon-long.jpg"
        );
}


#storeLandingPage
.store-card.ebay{

    --hover-store-logo:
        url(
            "/static/assets/platform-logos/ebay-long.jpg"
        );
}


#storeLandingPage
.store-card.neshome{

    --hover-store-logo:
        url(
            "/static/assets/platform-logos/neshome-long.jpg"
        );
}


#storeLandingPage
.store-card.bnq{

    --hover-store-logo:
        url(
            "/static/assets/platform-logos/bnq-long.jpg"
        );
}


#storeLandingPage
.store-card.onbuy{

    --hover-store-logo:
        url(
            "/static/assets/platform-logos/onbuy-long.jpg"
        );
}


#storeLandingPage
.store-card.manob2b,
#storeLandingPage
.store-card.manob2c{

    --hover-store-logo:
        url(
            "/static/assets/platform-logos/manomano-long.jpg"
        );
}


/* -----------------------------------------------------
   Giant logo itself
----------------------------------------------------- */

#storeLandingPage
.store-card::after{

    content:"";

    position:absolute;

    width:720px;
    height:360px;

    right:-205px;

    top:50%;

    z-index:1;

    pointer-events:none;

    background-image:
        var(--hover-store-logo);

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        contain;

    opacity:0;


    /*
     * Fade gradually:
     * invisible on left,
     * stronger toward right.
     */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            transparent 12%,
            rgba(0,0,0,.18) 24%,
            rgba(0,0,0,.48) 38%,
            rgba(0,0,0,.78) 52%,
            #000 70%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            transparent 12%,
            rgba(0,0,0,.18) 24%,
            rgba(0,0,0,.48) 38%,
            rgba(0,0,0,.78) 52%,
            #000 70%
        );

    transform:
        translateY(-50%)
        translateX(55px)
        scale(.88);

    transition:
        opacity .28s ease,
        transform .42s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );
}


/* -----------------------------------------------------
   Hover
----------------------------------------------------- */

#storeLandingPage
.store-card:hover::after{

    opacity:.22;
    transform:
        translateY(-50%)
        translateX(0)
        scale(1);
}


/* -----------------------------------------------------
   Keep real card content ABOVE giant watermark
----------------------------------------------------- */

#storeLandingPage
.store-card-main{

    position:relative;

    z-index:2;
}


#storeLandingPage
.store-card-footer{

    position:relative;

    z-index:2;
}


#storeLandingPage
.store-card-index{

    z-index:2;
}

/* =====================================================
   RATE TABLE STICKY HEADER — FULLY OPAQUE
===================================================== */

.rate-table thead th{

    background:
        #0e1722 !important;
}





/* =====================================================
   PRICE SETTING INTERFACE — REMOVE TOP HEADER
   Page-specific only
===================================================== */

/* =====================================================
   GLOBAL TOPBAR SPACE
   Keep the standard Alfred 64px height,
   but hide this page's topbar contents
===================================================== */

.topbar{

    display:flex !important;

    height:64px !important;

    min-height:64px !important;

    border-bottom:
        1px solid
        var(--line) !important;

    background:
        #080d15 !important;
}


/* Hide actual content, preserve the bar itself */

.topbar > *{

    display:none !important;
}

/* =====================================================
   CUSTOMER SERVICE + PRICE COMMAND
   STANDARD ALFRED TOPBAR
===================================================== */

.topbar{

    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;

    height:64px !important;

    min-height:64px !important;
}


.topbar
.search{

    display:none !important;
}


.topbar
.topbar-title{

    display:none !important;
}


.topbar
.top-actions{

    display:flex !important;

    align-items:center !important;

    gap:10px !important;

    margin-left:auto !important;

    opacity:1 !important;

    visibility:visible !important;

    color:var(--muted) !important;

    font-size:12px !important;
}


.topbar
.top-actions
.avatar{

    display:grid !important;

    place-items:center !important;
}

.cs-selected-store-logo::before{

    content:
        "↗";

    position:
        absolute;

    top:
        3px;

    right:
        4px;

    z-index:
        2;

    width:
        16px;

    height:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        5px;

    background:
        rgba(
            7,
            16,
            26,
            .82
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        900;

    pointer-events:
        none;

    transition:
        opacity .12s ease;
}


.cs-selected-store-logo:hover::before,
.cs-selected-store-logo:focus-visible::before{

    opacity:
        0;
}

/* =====================================================
   RATE TABLE — WEIGHT GROUPED HEADER
   Category | Low Weight x3 | High Weight x3

   Flat colours only.
   No gradients.
===================================================== */


/* -----------------------------------------------------
   HEADER ROW 1
----------------------------------------------------- */

.rate-table thead
.rate-group-row th {

    position: sticky;

    top: 0;

    height: 38px;

    z-index: 6;

    background: #0e1722 !important;

    border-bottom:
        1px solid
        #26384c;

}


/* CATEGORY spans both header rows */

.rate-table thead
.rate-category-heading {

    vertical-align: middle;

    text-align: left !important;

    color: #9eb1c6 !important;

    background: #0e1722 !important;

    border-right:
        1px solid
        #29415c;

}


/* LOW / HIGH WEIGHT group labels */

.rate-table thead
.rate-weight-group {

    text-align: center !important;

    color: #e7f0fa !important;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .09em;

    text-transform: uppercase;

}


/* Low Weight group */

.rate-table thead
.rate-weight-group-low {

    background:
        #102126 !important;

    color:
        #5fdcff !important;

}


/* High Weight group */

.rate-table thead
.rate-weight-group-high {

    background:
        #141b29 !important;

    color:
        #b487ff !important;

    border-left:
        1px solid
        #35506b;

}


/* -----------------------------------------------------
   HEADER ROW 2
----------------------------------------------------- */

.rate-table thead
.rate-base-row th {

    position: sticky;

    top: 38px;

    height: 38px;

    z-index: 5;

    text-align: center !important;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .06em;

    text-transform: uppercase;

}


/* LOW BASE */

.rate-table thead
.rate-base-row
.rate-base-low {

    color: #ff8398 !important;

    background:
        #1e1a26 !important;

}


/* MEDIUM BASE */

.rate-table thead
.rate-base-row
.rate-base-medium {

    color: #ffd15a !important;

    background:
        #1f2221 !important;

}


/* HIGH BASE */

.rate-table thead
.rate-base-row
.rate-base-high {

    color: #55e6a8 !important;

    background:
        #102429 !important;

}


/* Clear divider between weight groups */

.rate-table thead
.rate-high-weight-start {

    border-left:
        1px solid
        #35506b;

}


/* =====================================================
   BODY COLUMN COLOURS
   New display order:
   Low / Medium / High | Low / Medium / High
===================================================== */


/* LOW BASE columns */

.rate-table tbody
td:nth-child(2),

.rate-table tbody
td:nth-child(5) {

    background:
        #11131b !important;

}


/* MEDIUM BASE columns */

.rate-table tbody
td:nth-child(3),

.rate-table tbody
td:nth-child(6) {

    background:
        #13160f !important;

}


/* HIGH BASE columns */

.rate-table tbody
td:nth-child(4),

.rate-table tbody
td:nth-child(7) {

    background:
        #0d1917 !important;

}


/* Divider before High Weight */

.rate-table tbody
td:nth-child(5) {

    border-left:
        1px solid
        #253b50;

}


/* Keep Category normal */

.rate-table tbody
td:first-child {

    background:
        #09121c !important;

}

/* =====================================================
   RATE TABLE — SOLID TWO-ROW STICKY HEADER
   Prevent table body from showing through header.
===================================================== */

.rate-table thead {
    position: sticky;
    top: 0;
    z-index: 20;

    background: #0e1722;

    isolation: isolate;
}


/* Stop individual TH cells from independently sticking */
.rate-table thead th {
    position: static !important;
    top: auto !important;
}


/* Make both header rows fully opaque */
.rate-table thead tr {
    background: #0e1722;
}


/* CATEGORY */
.rate-table thead
.rate-category-heading {
    background: #0e1722 !important;
}


/* LOW WEIGHT main group */
.rate-table thead
.rate-weight-group-low {
    background: #102126 !important;
}


/* HIGH WEIGHT main group */
.rate-table thead
.rate-weight-group-high {
    background: #141b29 !important;
}


/* LOW BASE */
.rate-table thead
.rate-base-low {
    background: #1e1a26 !important;
}


/* MEDIUM BASE */
.rate-table thead
.rate-base-medium {
    background: #1f2221 !important;
}


/* HIGH BASE */
.rate-table thead
.rate-base-high {
    background: #102429 !important;
}


/* Clean solid line under entire header */
.rate-table thead::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background: #29415c;

    pointer-events: none;
}

/* =====================================================
   CUSTOMER SERVICE — EXPANDING STORE SELECTOR

   DEFAULT:
   all stores equal width + icon + name

   HOVER:
   hovered store expands
   all others become icon only

   SELECTED:
   selected store stays expanded
   all others stay icon only
===================================================== */

@media (min-width:1321px){

    /* =================================================
       STRIP
    ================================================= */

    body[data-page="customer-service"]
    .cs-store-strip{

        display:flex !important;

        width:100%;

        gap:10px;

        align-items:stretch;
    }


    /* =================================================
       DEFAULT STATE
       All stores share the available width equally.
    ================================================= */

    body[data-page="customer-service"]
    .cs-store-card{

        flex:
            1
            1
            0;

        width:auto;

        min-width:0;

        padding:
            0
            10px;

        transition:
            flex-grow .65s cubic-bezier(.2,.8,.2,1),
            flex-basis .65s cubic-bezier(.2,.8,.2,1),
            border-color .18s ease,
            background-color .18s ease,
            box-shadow .18s ease;
    }


    body[data-page="customer-service"]
    .cs-store-head{

        width:100%;

        min-width:0;

        display:flex;

        align-items:center;

        justify-content:flex-start;

        gap:10px;
    }


    body[data-page="customer-service"]
    .cs-store-name{

        display:block;

        min-width:0;

        max-width:220px;

        opacity:1;

        overflow:hidden;

        white-space:nowrap;

        text-overflow:ellipsis;

        transition:
            max-width .20s ease,
            opacity .14s ease,
            margin .20s ease;
    }


    /* =================================================
       COMPACT CARD
       Used when another store is hovered / selected.
    ================================================= */

    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card,

    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card.selected)
    .cs-store-card{

        flex:
            0
            0
            58px;

        width:58px;

        padding:
            0
            8px;
    }


    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card
    .cs-store-head,

    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card.selected)
    .cs-store-card
    .cs-store-head{

        justify-content:center;

        gap:0;
    }


    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card
    .cs-store-name,

    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card.selected)
    .cs-store-card
    .cs-store-name{

        max-width:0;

        margin:0;

        opacity:0;

        pointer-events:none;
    }


    /* =================================================
       SELECTED STORE
       Fill ALL remaining available space.
    ================================================= */

    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card.selected)
    .cs-store-card.selected{

        flex:
            1
            1
            auto;

        width:auto;

        padding:
            0
            16px;
    }


    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card.selected)
    .cs-store-card.selected
    .cs-store-head{

        justify-content:flex-start;

        gap:12px;
    }


    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card.selected)
    .cs-store-card.selected
    .cs-store-name{

        max-width:300px;

        opacity:1;

        pointer-events:auto;
    }


    /* =================================================
       HOVER STORE

       Hover always temporarily wins over selected.
    ================================================= */

    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card:hover{

        flex:
            1
            1
            auto;

        width:auto;

        padding:
            0
            16px;
    }


    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card:hover
    .cs-store-head{

        justify-content:flex-start;

        gap:12px;
    }


    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card:hover
    .cs-store-name{

        max-width:300px;

        opacity:1;

        pointer-events:auto;
    }


    /* If another store is hovered,
       temporarily collapse the selected one. */

    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card.selected:not(:hover){

        flex:
            0
            0
            58px;

        width:58px;

        padding:
            0
            8px;
    }


    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card.selected:not(:hover)
    .cs-store-head{

        justify-content:center;

        gap:0;
    }


    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card.selected:not(:hover)
    .cs-store-name{

        max-width:0;

        opacity:0;

        pointer-events:none;
    }

}

/* =====================================================
   CUSTOMER SERVICE — TIGHTER COLLAPSED STORE BUTTONS
===================================================== */

@media (min-width:1321px){

    /* Thicker outer platform border */
    body[data-page="customer-service"]
    .cs-store-card{
        border-width:2px !important;
    }


    /* Compact cards when hovering / selected */
    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card,

    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card.selected)
    .cs-store-card{

        flex:
            0
            0
            48px !important;

        width:48px !important;

        padding:
            0
            2px !important;
    }


    /* Selected card must still expand */
    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card.selected)
    .cs-store-card.selected,

    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card:hover{

        flex:
            1
            1
            auto !important;

        width:auto !important;

        padding:
            0
            16px !important;
    }


    /* Selected store collapses while another is hovered */
    body[data-page="customer-service"]
    .cs-store-strip:has(.cs-store-card:hover)
    .cs-store-card.selected:not(:hover){

        flex:
            0
            0
            48px !important;

        width:48px !important;

        padding:
            0
            2px !important;
    }

}

/* Selected card must still expand */
body[data-page="customer-service"]
.cs-store-strip:has(.cs-store-card.selected)
.cs-store-card.selected,

body[data-page="customer-service"]
.cs-store-strip:has(.cs-store-card:hover)
.cs-store-card:hover{

    flex:
        1
        1
        auto !important;

    width:auto !important;

    padding:
        0
        16px
        0
        0 !important;
}

/* Draft Shopify matches show a status message instead of product pricing. */
body[data-page="customer-service"][data-cs-draft-product="true"] .parent-product-summary,
body[data-page="customer-service"][data-cs-draft-product="true"] .cs-right-stack,
body[data-page="customer-service"][data-cs-draft-product="true"] .subtotal,
body[data-page="customer-service"][data-cs-draft-product="true"] .multiplier-grid,
body[data-page="customer-service"][data-cs-draft-product="true"] .pricing-base-section,
body[data-page="customer-service"][data-cs-draft-product="true"] .result-bar { display: none !important; }

.cs-calculator-brand-logo[hidden], .cs-selected-store-logo[hidden] { display: none !important; }
body[data-page="customer-service"][data-cs-store-selected="false"] #parentSku,
body[data-page="customer-service"][data-cs-store-selected="false"] #csProductFindButton { opacity: .5; cursor: not-allowed; }

/* Display all three rounded base prices before choosing a tier. */
body[data-page="customer-service"] .pricing-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 66px; }
body[data-page="customer-service"] .pricing-base-controls { grid-template-rows: 66px; }
body[data-page="customer-service"] .base-choice { flex-direction: column; gap: 6px; height: 66px; min-height: 66px; padding: 8px 10px; }
body[data-page="customer-service"] .base-choice > span { font-size: 11px; }
body[data-page="customer-service"] .cs-base-preview-price { color: #b2f3d8; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

body[data-page="customer-service"] #lowBase .cs-base-preview-price { color: #ff6b78; }
body[data-page="customer-service"] #mediumBase .cs-base-preview-price { color: #ffd166; }
body[data-page="customer-service"] #highBase .cs-base-preview-price { color: #69e3a5; }

/* Mark the selected store used as the comparison baseline. */
body[data-page="customer-service"] .platform-comparison-table tr.cs-selected-store-row > td { background: #18382f; border-top-color: #356b57; border-bottom-color: #356b57; }
body[data-page="customer-service"] .platform-comparison-table tr.cs-selected-store-row > td:first-child { box-shadow: inset 3px 0 0 #84e8cf; }
body[data-page="customer-service"] .platform-comparison-table tr.cs-selected-store-row .platform-store { color: #b5f5db; }
body[data-page="customer-service"] .platform-comparison-table tr > td { transition: background-color .2s ease; }

/* Discount entry: keep numeric validation without browser steppers. */
#csDiscountInput {
    appearance: textfield;
    -moz-appearance: textfield;
}
#csDiscountInput::-webkit-inner-spin-button,
#csDiscountInput::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Rejection: readable status, explanation, and a balanced price comparison. */
.cs-discount-result-compact.rejected {
    padding: 16px;
    gap: 12px;
    border-color: rgba(255,111,134,.38);
    border-left: 3px solid #ff6f86;
    background: linear-gradient(120deg, rgba(255,91,115,.09), rgba(7,18,29,.92));
}
.cs-discount-result-compact.rejected .cs-discount-result-icon {
    color: #ff8fa1;
    border-color: rgba(255,111,134,.25);
    background: rgba(255,91,115,.12);
}
.cs-discount-result-compact.rejected strong {
    font-size: 14px;
    line-height: 1.4;
    color: #ff9aad;
}
.cs-discount-result-compact.rejected p {
    font-size: 12px;
    line-height: 1.6;
    color: #bdc9d8;
}
.cs-discount-result-compact.rejected .cs-discount-result-details {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
    margin-top: 12px;
}
.cs-discount-result-compact.rejected .cs-discount-detail {
    padding: 10px;
    gap: 5px;
    justify-content: space-between;
}
.cs-discount-result-compact.rejected .cs-discount-detail span {
    font-size: 11px;
    line-height: 1.4;
    color: #a2b2c6;
}
.cs-discount-result-compact.rejected .cs-discount-detail b {
    font-size: 16px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.cs-discount-result-compact.rejected .cs-discount-detail:nth-child(2) {
    border-color: rgba(255,111,134,.3);
    background: rgba(255,91,115,.07);
}
.cs-discount-result-compact.rejected .cs-discount-detail:nth-child(2) b {
    color: #ff9aad;
}
@media (max-width: 600px) {
    .cs-discount-result-compact.rejected .cs-discount-result-details {
        grid-template-columns: minmax(0,1fr);
    }
    .cs-discount-result-compact.rejected .cs-discount-detail {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}