/** Shopify CDN: Minification failed

Line 591:0 Expected "}" to go with "{"

**/
:root{

  --bg:#F9FAFF;

  --card:#FFFFFF;

  --card2:#F3F6FF;

  --text:#2B2F42;

  --muted:#6C7293;

  --border:#E6E9F5;



  --accent:#F7B7D3;      /* soft pink */

  --accent2:#B8E3FF;     /* pastel blue */

  --accent3:#FFE8A3;     /* soft yellow */



  --danger:#FF7A7A;

  --ok:#4BC38A;



  --shadow: 0 10px 25px rgba(43,47,66,0.08);

  --radius: 18px;

  --maxw: 860px;



  font-synthesis-weight:none;

}



*{box-sizing:border-box}

html,body{height:100%}



body{

  margin:0;

  font-family: "Poppins", "Helvetica Neue", system-ui, -apple-system, sans-serif;

  background: var(--bg);

  color:var(--text);

}



.container{

  max-width: 100%;

  margin: 0 auto;

  padding: 28px 18px 40px;

}



/* Header */



.header{

  display:flex;

  gap:14px;

  justify-content:space-between;

  align-items:flex-start;

  margin: 14px 0 20px;

}



h1{

  margin:0 0 6px;

  font-size: 24px;

  font-weight:600;

}



.muted{color:var(--muted)}

.small{font-size: 13px}



.progressWrap{min-width: 180px; text-align:right}



.progressBar{

  height: 10px;

  width: 180px;

  border-radius: 999px;

  background: #EEF1FF;

  overflow:hidden;

}



.progressFill{

  height:100%;

  width:0%;

  background: linear-gradient(90deg, var(--accent), var(--accent2));

}



.progressText{

  margin-top:6px;

  font-size: 12px;

  color: var(--muted);

}



/* Cards */



.card{

  background: var(--card);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  padding: 10px;

  border: 0px solid var(--border);

}



.card h2{

  margin: 0 0 10px;

  font-size: 19px;

}



.card p{

  margin: 6px 0 14px;

  color: var(--muted);

  line-height: 1.5;

}



/* Layout */



.row{display:flex; gap:14px; flex-wrap:wrap}

.col{flex:1 1 260px}



.field{margin: 14px 0 18px}



.label{

  display:block;

  margin-bottom:8px;

  font-weight:600;

  font-size: 14px;

}



.help{

  margin-top:6px;

  font-size: 13px;

  color: var(--muted);

}



.req{

  color: var(--accent);

  font-weight: 700;

  margin-left:6px;

}



/* Options */



.options{

  display:grid;

  gap:10px;

}



.option{

  display:flex;

  gap:10px;

  align-items:flex-start;

  padding: 12px 14px;

  border-radius: 14px;

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

  background: var(--card2);

  transition: all 0.2s ease;

}



.option input{margin-top: 3px}



.option:hover{

  transform: translateY(-2px);

  box-shadow: 0 6px 14px rgba(43,47,66,0.06);

  border-color: var(--accent2);

}



/* Tables */



.grid{

  width:100%;

  border-collapse: collapse;

  border-radius: 14px;

  overflow:hidden;

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

}



.grid th, .grid td{

  padding: 12px;

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

  vertical-align: top;

}



.grid th{

  text-align:left;

  font-size: 13px;

  color: var(--muted);

  background: #F4F6FF;

}



/* Buttons */



.actions{

  display:flex;

  gap:12px;

  justify-content:flex-end;

  margin-top: 18px;

}



button{

  appearance:none;

  border:none;

  border-radius: 999px;

  padding: 12px 20px;

  font-weight:600;

  cursor:pointer;

  background: var(--accent);

  color: #2B2F42;

  transition: all 0.2s ease;

}



button:hover{

  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(247,183,211,0.35);

}



button.secondary{

  background: #FFFFFF;

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

}



button.danger{

  background: var(--danger);

  color:#fff;

}



/* Status */



.error{

  margin-top: 12px;

  color: var(--danger);

  font-weight: 600;

}



.success{

  color: var(--ok);

  font-weight: 600;

}



/* MaxDiff */



.maxdiff{

  display:grid;

  gap:12px;

}



.maxdiff .itemRow{

  display:grid;

  grid-template-columns: 1fr 140px 140px;

  gap: 12px;

  padding: 12px 14px;

  border-radius: 16px;

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

  background: var(--card2);

  align-items:center;

  transition: all 0.2s ease;

}



.maxdiff .itemRow:hover{

  transform: translateY(-2px);

  box-shadow: 0 6px 14px rgba(43,47,66,0.05);

}



.maxdiff .itemText{

  color: var(--text);

}



.maxdiff .pick{

  display:flex;

  gap:8px;

  align-items:center;

  font-size: 13px;

  color: var(--muted);

}



.maxdiff .pick input{

  transform: scale(1.1);

}



/* Badges */



.badge{

  display:inline-block;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 12px;

  color: var(--muted);

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

  background: #FFFFFF;

}



/* Divider */



hr{

  border:none;

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

  margin: 18px 0;

}



/* Responsive */



@media (max-width: 720px){

  .header{flex-direction:column; align-items:stretch}

  .progressWrap{text-align:left}

  .progressBar{width: 100%}

  .maxdiff .itemRow{

    grid-template-columns: 1fr 110px 110px;

}